webpack配置是标准的Node.js CommonJS模块，webpack中的绝对路径指"/src/css/file"，相对路径指"../css/file"。
温馨提示：本篇文章立足于3.5.x版本。
一、入口，entry
entry值可以是字符串，数组，对象。
//写法1是写法2的简写 const config = { entry: './src/file1.js' }; //写法2 const config = { entry: { main: './src/file1.js' } }; const config = { entry: ['./src/file1.js','./src/file2.js'] }; const config = { entry: { main: './src/file1.js', app: './src/file2.js' } };
二、输出，output
const config = { output: { filename: 'bundle.js', path: '/dist' } };
webpack有多种占位符，常见的如下：
[name]：代表打包后文件的名称，在entry或代码中确定；
[id]：webpack给块分配的内部chunk id，如果你没有隐藏，可以在打包后的命令行中看到；
[hash]：每次构建过程中，生成的唯一hash值；
[chunkhash]：依据于打包生成文件内容的hash值，内容不变，值不变。
三、模块，Modules
webpack模块有以下几种方式表达依赖关系：
1、ES2015 import；
2、同步，CommonJS require；
3、异步，AMD define和require语句；
4、css/less/sass中的@import；
5、样式中的url(...)和html文件中的<img src="..."/>。
loader是运行在Node.js中的函数，可以将资源文件作为参数，返回新的资源文件。loader用于加载某些资源文件，因为webpack本身只能打包CommonJS规范的js文件，对于其他资源，例如css，图片等，是没有办法加载的，这就需要对应的loader将资源转换。
1、babel-loader
加载ES2015+代码，然后使用Babel转译为ES5。
// npm一次性安装多个依赖模块，模块之间用空格隔开 npm install --save-dev babel-core babel-loader babel-preset-es2015
npm install --save-dev babel-loader babel-core babel-preset-env webpack
//单独配置.babelrc文件 module: { rules: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['env'], plugins: [require('babel-plugin-transform-object-rest-spread')] } } } ] }
2、css-loader
解析css文件后，使用import加载，并且返回css代码。
npm install --save-dev css-loader
import css from 'file.css';
module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }
3、style-loader
将模块的导出作为样式添加到DOM中。
npm install style-loader --save-dev
import style from './file.css';
module: { rules: [ { test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader" } ] } ] }
4、sass-loader
加载sass文件。
#安装sass-loader npm i -D node-sass sass-loader css-loader
//webpack.config.js module.exports={ module:{ rules:[ { test:/\.scss$/, use:[ "style-loader", "css-loader", "sass-loader" ] } ] } }
//index.js,自动编译成css require "./main.scss"
5、postcss-loader
使用postcss加载和转译css/sss文件。
npm i -D postcss-loader
//postcss.config.js module.exports = { parser: 'sugarss', plugins: { 'postcss-import': {}, 'postcss-cssnext': {}, 'autoprefixer': {}, 'cssnano': {} } }
//webpack.config.js module.exports = { module: { rules: [ { test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader' ] } ] } }
6、url-loader
像file loader一样工作，但如果文件小于限制，可以返回data URL。
npm install --save-dev url-loader
import img from './image.png';
module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { limit: 8192 } } ] } ] }
7、file-loader
将文件发送到输出文件夹，并返回（相对）URL。
npm install --save-dev file-loader
import img from './file.png';
module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'file-loader', options: { name: '[path][name].[ext]?[hash]' } } ] } ] }
8、html-loader
导出html为字符串，需要引用静态资源。
npm i -D html-loader
module: { rules: [{ test: /\.html$/, use: [ { loader: 'html-loader', options: { minimize: true } }] }] }
五、插件，plugins
webpack插件是一个具有apply属性的JavaScript对象，apply属性会被webpackcompiler调用，并且compiler对象可在整个compilation生命周期访问。plugin用于扩展webpack的功能，直接作用于webpack。
1、内置插件
A、BannerPlugin
为每个chunk文件头部添加注释信息。
new webpack.BannerPlugin(str)
B、CommonsChunkPlugin
它从根本上允许我们从不同的bundle中提取所有的公共模块，并且将他们加入公共bundle中。如果公共bundle不存在，那么它将会创建一个出来。
如果有任意模块加载了两次或更多（通过minChunks设置该值），它就会被打包进一个叫commons.js的文件里，后面你就可以在客户端缓存这个文件了。当然，这肯定会造成一次额外的请求，但是却避免了客户端多次下载相同库的问题。这个带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件。
new webpack.optimize.CommonsChunkPlugin({ name: "manifest", minChunks: Infinity })
C、DefinePlugin
创建一个在编译时可配置的全局常量，如果你自定义了一个全局变量PRODUCTION，可在此设置其值来区分开发还是生产环境，是启动dev server或者是prod server。
new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') // or development })
D、EnvironmentPlugin
实际上是DefinePlugin插件中对process.env进行设置的简写形式，如new webpack.EnvironmentPlugin(['NODE_ENV', 'DEBUG']) 将设置process.env.NODE_ENV='DEBUG'
E、UglifyJsPlugin
压缩JS代码。
const webpack = require('webpack');
module.exports = {
plugins:[
new webpack.optimize.UglifyJsPlugin({
sourceMap: options.devtool && (options.devtool.indexOf("sourcemap") >= 0 || options.devtool.indexOf("source-map") >= 0)
})
]
}
F、UglifyjsWebpackPlugin
npm i -D uglifyjs-webpack-plugin
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
plugins: [
new UglifyJSPlugin()
]
}
G、HotModuleReplacementPlugin
启用热替换模块(Hot Module Replacement)，也被称为HMR，永远不要在生产环境(production)下启用HMR。
new webpack.HotModuleReplacementPlugin()
H、ProvidePlugin
自动加载模块，不要import或者require引入。
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' })
2、非内置插件
A、ExtractTextWebpackPlugin
代码拆分，分离css和js文件。它将所有的入口chunk中引用的 *.css，移动到独立分离的css文件，使得样式不再内嵌到jsbundle中，而是会放到一个单独的css文件（即styles.css）当中。如果你的样式文件大小较大，这会做更快提前加载，因为css bundle会跟js bundle并行加载。
npm install --save-dev extract-text-webpack-plugin
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css")
]
}
B、HtmlWebpackPlugin
这个插件的作用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html，在每次生成的js文件名称不同时非常有用（比如添加了hash值）。
npm install --save-dev html-webpack-plugin
var HtmlWebpackPlugin = require('html-webpack-plugin'); var webpackConfig = { entry: 'index.js', output: { path: 'dist', filename: 'index_bundle.js' }, plugins: [new HtmlWebpackPlugin()] };
module.exports = webpackConfig;
C、CompressionWebpackPlugin
使用配置的算法（如gzip）压缩打包生成的文件。
npm i -D compression-webpack-plugin
var CompressionPlugin = require("compression-webpack-plugin"); module.exports = { plugins: [ new CompressionPlugin({ asset: "[path].gz[query]", algorithm: "gzip", test: /\.(js|html)$/, threshold: 10240, minRatio: 0.8 }) ] }
D、visualizer和stats
const StatsWriterPlugin = require('webpack-stats-plugin').StatsWriterPlugin;
const Visualizer = require('webpack-visualizer-plugin');
module.exports = {
...
plugins: [
new StatsWriterPlugin({
fields: null,
stats: {
chunkModules: true
}
}),
new Visualizer({
filename: './statistics.html'
}),
...
]
}
六、devtool
// 以牺牲构建速度为代价，但是map表最详细。 devtool: "source-map" // 嵌入到源文件中，为打包前的每一个文件添加sourcemap的DataUrl，DataUrl是包含一个文件完整souremap信息的Base64格式化后的字符串，而不是一个 url。 devtool: "inline-source-map" // 没有模块映射，而是命名模块，以牺牲细节达到最快。 devtool: "eval" // 将SourceMap嵌入到每个模块中 devtool: "eval-source-map" // SourceMap不在源文件中引用 devtool: "hidden-source-map" //没有模块映射 devtool: "cheap-source-map" //有模块映射 devtool: "cheap-module-source-map"
当webpack打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。JavaScript提供了source map功能，将编译后的代码映射回源代码，使调试更容易。如果一个错误来自于b.js，source map就会明确的告诉你。
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/main.js',
print: './src/sec.js'
},
+ devtool: 'inline-source-map',
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Development'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
假设在sec.js中写一个错误语法，编译打包后，刷新页面，就会在控制台看到错误文件及出错行数。
七、devServer
用于设置webpack-dev-server的命令行。
devServer: { bonjour：true, contentBase: path.join(__dirname, "dist"), compress: true, historyApiFallback: true, hot: true, inline: true, open:true }
看了那么多文档，一般都是清一色的英文，这次竟然发现devServer的属性值中有bonjour，哈哈，挺好的，我猜写webpack的开发人员会点法语。
//webpack.config.js const path = require('path'); module.exports = { entry："", output: { path: path.resolve(__dirname, "dist"), //路径解析 filename: "bundle.js" }, module: { rules: [] }, plugins: [], devtool: "inline-source-map", devServer: { contentBase: "./public", //本地服务器所加载的页面所在的目录 historyApiFallback: true, //不跳转 inline: true, //实时刷新 stats:{} }, target:"web", externals: { vue: 'vue' }, performance: { hints: "error" //生产环境推荐用error，开发环境推荐用warning } }
736
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
