一位朋友建议我学习Webpack，因为在编码时它会节省多少时间进行热重新加载。他给了我一个基本的webpack.config.js文件，它对单个入口点工作正常。
本周一位客户要我编码一个原型网站，我想扩充我的webpack.config以允许多个入口点。不幸的是，我主要是一名设计师，所以webpack config的大部分语法都是希腊语，我似乎无法在网上找到答案。
这就是我所希望的：
Project Root
|
+-- node_modules
|
+-- dist
| |
| +-- css
| | |
| | +-- custom.css (global styles)
| | +-- report1.css (styles for report 1 only)
| | +-- report2.css (styles for report 2 only)
| | +-- vendor.css (bootstrap, font-awesome, vendors, etc.)
| |
| +-- fonts
| | |
| | +-- fontawesome-webfont.eot
| | +-- fontawesome-webfont.svg
| | +-- fontawesome-webfont.ttf
| | +-- fontawesome-webfont.woff
| | +-- fontawesome-webfont.woff2
| |
| +-- js
| | |
| | +-- common.js (global scripts)
| | +-- report1.js (scripts for report 1 only)
| | +-- report2.js (scripts for report 2 only)
| | +-- vendor.js (bootstrap, jquery, etc.)
| |
| +-- index.html (listing page for reports)
| +-- report1.html
| +-- report2.html
|
+-- src
| |
| +-- fonts
| | |
| | +-- fontawesome-webfont.eot
| | +-- fontawesome-webfont.svg
| | +-- fontawesome-webfont.ttf
| | +-- fontawesome-webfont.woff
| | +-- fontawesome-webfont.woff2
| |
| +-- js
| | |
| | +-- common.js (global scripts incl. bootstrap, jquery import)
| | +-- report1.js (scripts for report 1 only)
| | +-- report2.js (scripts for report 2 only)
| |
| +-- scss
| |
| +-- bootstrap.scss (overrides and link to node_module import)
| +-- common.scss (common styles)
| +-- font-awesome.css (@font-face imports)
|
+-- index.html
+-- package.json
+-- report1.html
+-- report2.html
+-- weppack.config.js
当然，我希望能够提供大量报告，而不仅仅是两份报告。
这是我从朋友的骨架和其他StackOverflow答案中入侵的webpack.config.js文件。
var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: {
common: './src/js/common.js',
report1: './src/js/report1.js',
report2: './src/js/report2.js',
custom: './src/scss/custom.scss',
vendor: [
'./src/scss/bootstrap.scss',
'./src/scss/font-awesome.css'
],
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'js/[name].js'
},
module: {
rules: [
{
test: /\.s[ac]ss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ["css-loader","sass-loader"],
})
},
{
test: /\.css$/,
loader: 'style-loader!css-loader?sourceMap'
},
// Font Definitions
{ test: /\.svg?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=65000&mimetype=image/svg+xml&name=fonts/[name].[ext]' },
{ test: /\.woff?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=65000&mimetype=application/font-woff&name=fonts/[name].[ext]' },
{ test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=65000&mimetype=application/font-woff2&name=fonts/[name].[ext]' },
{ test: /\.[ot]tf?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=65000&mimetype=application/octet-stream&name=fonts/[name].[ext]' },
{ test: /\.eot?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=65000&mimetype=application/vnd.ms-fontobject&name=fonts/[name].[ext]' }
],
},
plugins: [
new ExtractTextPlugin({
filename: "css/[name].css",
allChunks: true
}),
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
filename: "js/vendor.js",
minChunks: ({resource}) => /node_modules/.test(resource),
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'Tether': 'tether',
'window.Tether': 'tether'
}),
new HtmlWebpackPlugin({
title: "Report 1",
inject: false,
chunks: ['report1'],
filename: 'report1.html'
}),
new HtmlWebpackPlugin({
title: "Report 2",
inject: false,
chunks: ['report2'],
filename: 'report2.html'
}),
],
devServer: {
port: process.env.PORT || 8080,
historyApiFallback: { index: "/" },
},
};
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = false;
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: true
},
output: {
comments: false
},
sourceMap: false
})
]);
}
的package.json
{
"name": "test-name",
"description": "test description",
"author": "Firstname Lastname",
"private": true,
"scripts": {
"dev": "webpack-dev-server --hot --inline",
"build": "NODE_ENV=production webpack"
},
"dependencies": {
"bootstrap": "^4.0.0-alpha.4",
"daterangepicker": "^2.1.25",
"font-awesome": "^4.6.3",
"jquery": "^3.1.1",
"moment": "^2.13.0",
"tether": "^1.3.7"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.16.0",
"clean-webpack-plugin": "^0.1.16",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.11.1",
"html-webpack-plugin": "^2.28.0",
"node-sass": "^4.5.2",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.3",
"style-loader": "^0.17.0",
"underscore-template-loader": "^0.7.3",
"url-loader": "^0.5.7",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1",
"webpack-split-by-path": "^2.0.0"
},
"babel": {
"presets": [
"es2015"
]
}
}
我对上述问题的解决方法是：
没有热重装。虽然我可以运行npm run dev和npm run build，但即使它看到更新，浏览器也会返回“无需更新”（这可能是因为它没有在正确的位置收听正确的文件或某些内容）。
我一直收到一个空的“dist / js / custom.js”文件（没什么大不了的）
我不确定我是否正确地执行了此操作，因为我从node_module导入bootstrap scss，而其他人建议将其复制到/ src / scss / bootstrap文件夹。
我知道这似乎是一个非常专业的案例 - 也许并不完全是Webpack的用途 - 但是我的客户通常希望在插入实时数据和移动最终编码之前看到原型网站上的快速迭代页面到实时环境。使用SASS，实时重新加载和分块常见与特定编译的css和js真的会节省我很多时间......如果我能弄清楚如何修复我的webpack.config.js文件。
非常感谢任何帮助。