I use webpack HotModuleReplacementPlugin to let my website could hot reload when I fix the code.
But I don't know how to build two html page.
I want to build two page "index.html" & "introduction.html"
Now I use these code in my webpack.config.js but it will have a problem, in the Chrome dev tool would show
「Uncaught Error: _registerComponent(...): Target container is not a DOM element.」
How could I solved these problem?
var webpack = require('webpack');
var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
var autoprefixer = require('autoprefixer');
var config = {
entry: {
index: [
'webpack-dev-server/client?http://0.0.0.0:8080',
'webpack/hot/only-dev-server',
path.resolve(__dirname, 'src/index.jsx')
],
introduction: [
'webpack-dev-server/client?http://0.0.0.0:8080',
'webpack/hot/only-dev-server',
path.resolve(__dirname, 'src/introduction.jsx')
],
},
output: {
path: path.resolve(__dirname, 'build'),
publishPath: '/',
filename: 'js/[name].js'
},
module: {
loaders: [
{
test:/\.jsx?$/,
exclude: /node_modules/,
loader: 'react-hot!babel'
},
{
test: /\.sass$/,
execlude: /node_modules/,
loader: 'style!css!postcss!sass'
},{
test: /\.scss$/,
execulde: /node_modules/,
loader: 'style!css!postcss!sass'
},
{
test: /\.css$/,
exclude: /node_modules/,
loader: 'style!css!postcss',
},
{
test: /\.(jpg|png|gif)$/,
exclude: /node_modules/,
loader: 'file?name=images/[name].[ext]'
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=image/svg+xml'
}
]
},
postcss: [
autoprefixer({ browsers: ['last 2 versions']})
],
resolve: {
extensions: ['', '.js', '.jsx']
},
exclude: [
/(test)/
],
devServer: {
contenBase: './dist'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new htmlWebpackPlugin({
filename: 'index.html',
template: './src/html/index.html'
}),
new htmlWebpackPlugin({
filename: 'introduction.html',
template: './src/html/introduction.html'
}),
]
}
module.exports = config;
Related
at first i was getting error that scss files are not readable, when i tried to add options for sass loader to set its path to node_modules. But after that i could not solve this error. Is there anyother way to add multiple loaders and options for them?
this is my webpack.config.js"
var webpack = require('webpack');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
var BundleTracker = require('webpack-bundle-tracker');
var ExtractText = require('extract-text-webpack-plugin');
module.exports = {
entry: path.join(__dirname, 'assets/src/js/index'),
output: {
path: path.join(__dirname, 'assets/dist'),
filename: '[name]-[hash].js'
},
plugins: [
new BundleTracker({
path: __dirname,
filename: 'webpack-stats.json'
}),
new ExtractText({
filename: '[name]-[hash].css'
}),
new CleanWebpackPlugin(),
],
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
loader: ['style-loader', 'css-loader'],
},
{
test: /\.scss$/,
use:[{
loader: "sass-loader",
options: {
"includePaths": [
path.resolve(__dirname, 'node_modules')
]
}
},
{
loader: "style-loader"
},
{
loader: "css-loader"
}
]
},
],
},
};```[this is the error i am getting][1]
[1]: https://i.stack.imgur.com/6O8ct.png
I tried to add 'target:node' to the webpack.dev.js to exclude node_modules from my bundle file. This results in an error. Now I have 'target:web' but has the node_modules back in. This is my config file for the applicationpart(trying to use DllReferencePlugin):
var path = require("path");
var webpack = require("webpack");
module.exports = {
target:'web',
devServer: {
contentBase: path.join(__dirname, "build"),
compress: true,
port: 9000
},
node: {
fs: 'empty'
},
cache: true,
devtool: "eval", //or cheap-module-eval-source-map
entry: {
app: path.join(__dirname, "client/app", "app.js")
},
output: {
path: path.join(__dirname, "buildf"),
filename: "ha.js",
chunkFilename: "[name].js"
},
plugins: [
//Typically you'd have plenty of other plugins here as well
new webpack.DllReferencePlugin({
context: path.join(__dirname, "client"),
manifest: require("./build/vendor-manifest.json")
}),
],
module: {
loaders: [
{
test: /\.js?$/,
loader: "babel-loader",
include: [
path.join(__dirname, "client") //important for performance!
],
exclude: [
path.resolve(__dirname, "node_modules")
],
query: {
cacheDirectory: true, //important for performance
plugins: ["transform-regenerator"],
presets: ["es2015", "stage-0"]
}
},
{ test: /\.(scss|sass)$/, loader: ['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.html$/, loader: 'raw-loader' },
{ test: /\.css$/, loader: 'css-loader' }
]
}
};
How can I exclude the node_modules folder from the ha.js (app bundle) build? for the complete code see here
Here an example:
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/, // <---
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
}
]
I'm using react-hot-loader in my react app. I'm using devtool: 'source-maps', but the source-maps don't seem to work. I'm able to view the original source in chrome's dev-tools, but when I get an error, I only see the following:
I've also tried pretty much every other setting for devtool, but I always get this behaviour. What can I do to get source-maps working properly?
Here's my webpack.config.js:
'use strict';
const webpack = require('webpack');
const path = require('path');
const cssModulesLoader =
'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]__[hash:base64:5]';
const cssLoaders = [
// loaders for loading external css
{
test: /\.s[ac]ss$/,
include: path.resolve(__dirname, 'node_modules'),
exclude: path.resolve(__dirname, 'ui'),
loaders: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.css$/,
include: path.resolve(__dirname, 'node_modules'),
exclude: path.resolve(__dirname, 'ui'),
loaders: ['style-loader', 'css-loader']
},
// loaders for custom css
{
test: /\.css$/,
exclude: path.resolve(__dirname, 'node_modules'),
loaders: ['style-loader', cssModulesLoader]
},
{
test: /\.s[ac]ss$/,
exclude: [
path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname, 'ui/src/global.scss')
],
loaders: ['style-loader', cssModulesLoader, 'sass-loader']
},
{
test: /global\.scss$/,
include: path.resolve(__dirname, 'ui/src/global.scss'),
loaders: ['style-loader', 'css-loader', 'sass-loader']
}
];
module.exports = {
devtool: 'source-maps',
entry: {
app: ['babel-polyfill', 'react-hot-loader/patch', './ui/src/index']
},
output: {
path: path.resolve(__dirname, './ui/assets'),
filename: 'bundle.js',
publicPath: 'assets/'
},
module: {
rules: [
{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader' },
{ test: /\.json/, loader: 'json-loader' },
...cssLoaders,
{
test: /\.(ttf|eot|woff|svg)/,
include: [path.resolve(__dirname, 'node_modules')],
loader: 'file-loader'
}
]
},
plugins: [
new webpack.ProvidePlugin({
React: 'react'
})
],
devServer: {
historyApiFallback: true,
proxy: {
'/api': {
target: 'http://localhost:48763/',
secure: false
},
'/wsapi': {
target: 'ws://localhost:48763',
ws: true
}
}
}
};
Somebody can help me on configuring webpack for following requirements
AngularJS (1.6) ES6 to ES5 converstion
SCSS to CSS compiler
All js to single bundle
All css to single bundle
All folder structure should created with html only ( no js files, since we alrady bundling it )
This is what I have tried so far
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, './app/app.module.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{ test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader'},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&minetype=application/font-woff'
},
{
test: /\.woff2$/,
loader: 'url?limit=10000&minetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&minetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&minetype=image/svg+xml'
}
]
},
plugins: [
//new ExtractTextPlugin("styles.css"),
]
};
Updated webpack conf
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, './app/app.module.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
devtool: 'source-map',
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}, {
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}, {
test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
loader: 'file-loader?name=[name].[ext]&publicPath=../fonts/&outputPath=/assets/fonts/'
},
{ test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader?name=/assets/images/[name].[ext]' },
{
test: /\.(html)$/,
loader: 'file-loader?name=[path][name].[ext]'
},
{
test: /\.(json)$/,
loader: 'file-loader?name=[path][name].[ext]'
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
use: [{
loader: 'css-loader'
}, {
loader: 'sass-loader' // compiles Sass to CSS
}],
fallback: 'style-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin('assets/css/styles.css')
]
};
sample project with webpack configured posted it in my github
I have installed bootstrap and when I run the application using webpack I am facing this error:
Angularjs: Cannot find module “../../node_modules/bootstrap/fonts/glyphicons-halflings-regular.eot”
Webpack.config.js:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: [
'./app/app.js',
'./app/index.html',
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8081/'
],
output: {
filename: 'bundle.js',
path: __dirname + './js'
},
module: {
loaders: [
// Exports Angular
{ test: /[\/]angular\.js$/, loader: "exports?angular" },
// Script Loaders
{ test: /\.coffee$/, loader: "coffee" },
{ test: /\.html/, loader: 'file?name=[name].[ext]' },
// Style Loaders, style! inlines the css into the bundle files
{ test: /\.css$/, loader: "style!css!less" },
{ test: /\.scss$/, loader: "style!css!sass" },
{
test: /\.less$/,
loader: ExtractTextPlugin.extract(
// activate source maps via loader query
'css?sourceMap!' +
'less?sourceMap'
)
},
{ test: /\.(jpg|png|gif)$/, loader: "file-loader?me=images/[hash]. [ext]"},
{ test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
{ test: /\.(woff|woff2)$/, loader: "url?limit=10000&minetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }
]},
resolve: {
extensions: [
'',
'.js', '.coffee',
'.html',
'.css', '.styl', '.scss', '.less'
]},
plugins: [
// extract inline css into separate 'styles.css'
new ExtractTextPlugin('styles.css')
]};