I have a structure like this but am having an error when trying to run webpack
/app
/main.js
/foo.js
/dist
index.html ( uses <script src="dist/bundle.js"></script>)
webpackconfig.js
in main.js:
import foo from './foo'
var foo = new foo()
foo.js:
export class foo {
constructor() {
loadScript("//www.parsecdn.com/js/parse-1.4.0.min.js", init());
}
}
webpackconfig.js
My config:
module.exports = {
context: __dirname + "/app",
entry: "./main.js",
output: {
path: __dirname + "/dist",
filename: "bundle.js"
},
devtool: "#source-map",
module: {
loaders: [
// Transpile any JavaScript file:
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}
]
},
resolve: {
// you can now require('file') instead of require('file.js')
extensions: ['', '.js', '.json']
}
}
but I get this error:
ERROR in ./main.js
Module not found: Error: Cannot resolve module 'foo'
It is because webpack try to load foo from node_modules directory.
You have to specify the path of your module like this:
import foo from './foo'
Related
Hello I am using VueJS and the webpack template. I have a bunch of components I can easily display with Vue Router. However, my organization uses Robot Framework for testing and we generate an HTML page using the command:
python -m robot.testdoc /tests/directory /destination.html
This is basically how I am using the router:
import Vue from 'vue'
import Router from 'vue-router'
import Main from '#/components/Main.vue'
import Component1 from '#/components/Component1.vue'
import Component2 from '#/components/Component2.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
mode: history,
name: 'Main',
component: Main
},
{
path: '/component1',
mode: history,
name: 'Component1',
component: Component1
},
{
path: '/component2',
mode: history,
name: 'Component2',
component: Component2
}
]
})
Is there a way to route to an HTML file using Vue Router?
First you'll need html-loader:
yarn add html-loader | npm install html-loader
Then you need to update your webpack.config.js file and add an entry to your rules to handle .html extensions:
{
test: /\.(html)$/,
exclude: /(node_modules)/,
use: {
loader: "html-loader"
}
}
Then you can import your .html files like you would components:
import Destination from '/path/to/destination.html'
Now treat component as an Object and leverage the template property to serve static HTML files:
{
path: '/destination',
mode: history,
name: 'destination',
component: { template: Destination }
}
1.install html-loader
npm install --save-dev html-loader
2.use below code vue.config.js or Webpack.config.js
For webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.html$/i,
loader: 'html-loader',
},
],
},
};
For Vue cli users vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('html')
.test(/\.html$/)
.use('html-loader')
.loader('html-loader')
}
}
just add router in your
{
path: '/print',
name: 'print',
component: () => import('../pages/print.html'),
},
more about vue
https://cli.vuejs.org/guide/webpack.html#replacing-loaders-of-a-rule
I am working on a React application that is running on the webpack-dev-server from npm. Upon running the server, I notice that I get the following message in the browser console:
"Refused to apply style from 'http://localhost:8080/css/index.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."
I am able to fetch all of the following resources except the custom css file titled style.css. When I run application directly from the containing folder(without running on the local server), the style.css file loads without a problem.
Do I need utilize a css loader with webpack?
I already have reviewed the following post and have tried all the suggestions, but to no avail:
Stylesheet not loaded because of MIME-type
In index.html I use a link tag with the following format:
<link rel="stylesheet" type="text/css" href="css/style.css"
Here is my webpack.config.js file:
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
},
plugins: [
new HTMLWebpackPlugin({
template: './src/index.html', //source
filename: 'index.html' //destination
})
]
}
Here is my project directory structure:
src
components
css
style.css
index.html
index.js
Any help would be appreciated
So it turns out that I needed to utilize the style-loader and css-loader. I suspect that the issue was entirely with webpack-dev-server and how it was referencing the stylesheet. I am utilizing webpack 4 in case it helps anyone in the future.
My webpack.config.js now looks like this:
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
//will automatically inject bundle js into ./dist/index.html
new HTMLWebpackPlugin({
template: './src/index.html', //source
filename: 'index.html' //destination
})
]
}
Pretty simple one.
It's enough that you just need to add
< base href="/" >
on your layout section
I am trying to use an icon from font-awesome with webpack 4 via scss.
The webconfig file looks as following:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");
const autoprefixer = require("autoprefixer");
module.exports = {
entry: ["./src/index.js"],
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.[hash].js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env", "#babel/preset-react"]
}
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: {
minimize: true
}
}
]
},
{
test: /\.(sass|scss)$/,
use: [
{
loader: "file-loader",
options: {
name: "style.css"
}
},
{ loader: "extract-loader" },
{
loader: "css-loader"
},
{
loader: "postcss-loader",
options: {
plugins: () => [autoprefixer({ grid: false })]
}
},
{
loader: "sass-loader",
options: {
includePaths: ["./node_modules"]
}
}
]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: "file-loader",
options: {
name: "[name][hash].[ext]",
outputPath: "fonts/"
}
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./public/index.html",
filename: "./index.html"
}),
new CopyWebpackPlugin([
{
from: "public"
}
])
]
};
I imported the scss as following:
#import "#fortawesome/fontawesome-free/scss/fontawesome.scss";
and use:
<a class="mdc-list-item mdc-list-item--selected demo-drawer-list-item" href="#">
<i class="fas fa-inbox mdc-list-item__graphic"></i>Inbox
</a>
It shows:
a rectangle instead an icon. What am I doing wrong?
The fully example is on github.
I hit the same issue importing the font-awesome scss into my project, this is what worked for me.
#import "~#fortawesome/fontawesome-free/scss/fontawesome";
For anyone else running into an issue with the fonts not loading (e.g. showing the empty square glyph) despite Webpack (4) compiling and file-loader copying the fonts properly, I found an option that makes everything load as expected.
First the recommended SCSS imports with ~ node_modules path as seen in other posts:
$fa-font-path: '~#fortawesome/fontawesome-pro/webfonts';
#import '~#fortawesome/fontawesome-pro/scss/fontawesome';
#import '~#fortawesome/fontawesome-pro/scss/light';
Then you'll have the file-loader config targeting font files (above). To the file-loader options you want to add the esModule: false option. Note that this could mess with other fonts you may be importing outside of SCSS.
Basically what I discovered is the fonts would get copied, but the font file urls in the compiled CSS would show as src: url([object Module]);. By default file-loader turns the imported file into a module for convenience, but of course we don't need that for fonts here, so adding the option above fixes that.
to get font-awesome for Laravel project the next worked for me:
first i had searched 'fa-fw' in public/css. assured it is absent.
npm install --save #fortawesome/fontawesome-free - that downloaded and created files to node_modules.
add to resources/sass/app.scss
#import '~#fortawesome/fontawesome-free/scss/fontawesome';
#import '~#fortawesome/fontawesome-free/scss/regular';
#import '~#fortawesome/fontawesome-free/scss/brands';
#import '~#fortawesome/fontawesome-free/scss/solid';
add to resources/sass/_variables.scss (not sure for this)
$fa-font-path: "../webfonts";
build. npm run dev
fa now in you app.css. enjoy!
I'm starting with webpack, but I'm really new on this and I'm stuck right now.
My project copies my fonts correctly but not images. Now the only way I am able to make it work is by copying my images manually to the dist/img folder.
This is my config:
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require('webpack');
var path = require("path");
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname + '/dist'),
filename: 'app.bundle.js'
// publicPath: '/dist',
},
module: {
rules:[
{
test:/\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader?sourceMap","resolve-url-loader","sass-loader?sourceMap"],
// publicPath: '/dist'
})
},
{
test: /\.(woff2?|ttf|otf|eot|svg)$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
// loader: 'file-loader?name=/fonts/[name].[ext]'
},
{
test: /\.(jpg|png|gif)$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'img/',
publicPath:'img/'
}
}]
}
]
},
devServer: {
contentBase: path.join(__dirname, "/dist"),
compress: true,
port: 8000,
stats: "errors-only",
open: true
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
new ExtractTextPlugin("styles.css"),
new HtmlWebpackPlugin({
title: 'Project',
hash:true,
template: './src/index.html'
})
]
}
I've tried several configurations but no solution. I also searched here for any solution but without success.
If your images are only referenced in HTML files as <img> tags, webpack by default won't pick them up because it doesn't parse HTML. You have at least 2 choices:
Use CopyWebpackPlugin to copy the files to wherever you want, this at least removes the "manual" part you mention
Move your images references to styles, where webpack can pick them up via the scss loader you are using. For example
background-image: url("img/foo.png");
There is also option import image trough JavaScript.
import '../img/image.png';
I had this problem. I didn't know that the file-loader only copies the images if you run a build, and doesn't do anything while using webpack-dev-server. My solution was just:
$ npx webpack
1.When I Execute command line, the Error is as follows：
D:\mypro\Demo\webpack\webpackgulp>webpack
Hash: d6b7d6bad8ca0746b6ec
Version: webpack 1.13.1
Time: 46ms
[0] ./src/main.js 0 bytes [built] [failed]
ERROR in ./src/main.js
Module parse failed: D:\mypro\Demo\webpack\webpackgulp\src\ma
ken (7:16)
You may need an appropriate loader to handle this file type.
2.Related configuration is as follows：
（1）Document structure：
（2）webpack.config.js：
module.exports = {
entry: "./src/main.js",
output: {
filename: "build.js",
path: __dirname
},
module: {
loaders: [
{
test: /\.less$/,
loader: "style!css!less"
}
]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
plugins: []
};
（3）Entry file is main.js:
// css
require('../css/main.less');
var ContentMode = React.createClass({
render: function(){
return (
<div className="ContentMode">
<div class="contents">{this.props.contents}</div>
{this.props.children}
</div>
)
}
});
var Page = React.createClass({
render: function(){
return (
<div className="homepage">
<ContentMode contents ="longen">this is one comment</ContentMode >
<ContentMode contents ="longen2">this is two comment</ContentMode >
</div>
)
}
});
/* init to content container */
React.render(
React.createElement(Page,null),document.getElementById("content")
);
（4）node_modules：
3.How to solve this problem?