webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
安装
webpack 最新版本 v4.26.0
github star：45.292k
需要同时安装 webpack、webpack-cli、webpack-dev-server，建议安装在每个独立项目而不是全局，这样方便单独使用 webpack3 或者 webpack4
yarn add webpack webpack-cli webpack-dev-server -D
或者：
cnpm install webpack webpack-cli webpack-dev-server -D2018年8月25号webpack4正式发布。再次之后只要使用npm install webpack命令，默认安装的就是版本4
基础版
webpack4 会根据环境自动设置一些默认配置，下面是一个最基础的配置：
package.json
// --config webpack.config.js 配置文件的路径
// --mode=production 用到的模式
// --progress 打印出编译进度的百分比值
"scripts": {
"dev": "webpack-dev-server --progress --mode=development --config webpack.config.js",
"build": "webpack --progress --mode=production --config webpack.config.js",
},webpack.config.js
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
entry: './main.js',
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/', // 资源引用路径前后都有斜杠
filename: '[name].js'
},
devServer: {
open: true, // 自动打开浏览器
host: '0.0.0.0',
port: 3003,
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, 'template.html'),
}),
new webpack.HotModuleReplacementPlugin(), // 开启webpack热更新功能
new webpack.NoEmitOnErrorsPlugin(), // webpack编译出错跳过报错阶段，在编译结束后报错
],
}浏览器输入 http://0.0.0.0:3003/webpack-dev-server 可以查看开发环境文件结构
实用版
package.json
在实际使用中建议分开配置，生产环境和开发环境分别对应一个配置文件
// --config config/webpack.dev.js 配置文件的路径
// --progress 打印出编译进度的百分比值
"scripts": {
"start": "webpack --progress --config config/webpack.dll.js",
"dev": "webpack-dev-server --progress --config config/webpack.dev.js",
"build": "webpack --progress --config config/webpack.prod.js"
},base.conf.js
把公共配置提取到一个公用文件 base.conf.js 中，后期所有修改都在这个文件，其他配置文件不动，减小人为错误
const os = require('os')
const getIp = () => { // 获取本地ip
var interfaces = os.networkInterfaces();
for (var devName in interfaces) {
var iface = interfaces[devName];
for (var i = 0; i < iface.length; i++) {
var alias = iface[i];
if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
return alias.address;
}
}
}
}
module.exports = {
base: {
rootPath: '/',
fileName: 'dist',
filePath: 'dist/static',
},
dev: {
useEslint: true,
host: getIp(),
port: 3001,
proxy: [
{
context: ['/v2', '/xw', '/wap', '/information'],
target: 'https://xwm.jindanlicai.com/',
changeOrigin: true,
cookieDomainRewrite:{
"*":getIp()
}
},
]
}
}webpack.base.js
提取开发环境和取生产环境的相同部分到基础配置文件 webpack.base.js 中
const config = require('./base.conf.js') // 配置文件
const path = require('path')
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HappyPack = require('happypack') // 多进程 默认三个
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
// 处理路径
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
// eslint检测
const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
exclude: /node_modules/,
include: [resolve('src')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: true
}
})
// 获取当前环境
const prod = process.env.NODE_ENV === 'production'
module.exports = {
context: path.resolve(__dirname, '../'), // 作用于entry 和 loader
entry: {
index: './src/main.js',
},
output: {
path: resolve(`${config.base.filePath}`), // 输出到static这个地址 只能是绝对路径
filename: 'js/[name].js',
chunkFilename: 'js/[name]_[chunkhash:6].js'
},
resolve: {
extensions: ['.css', '.less', '.js', '.vue', '.json'], // 使用的扩展名
alias: {
// 'vue$': 'vue/dist/vue.esm.js', // 模块别名列表
'@': resolve('src'),
}
},
module: {
// 忽略的文件中不应该含有 import, require, define 的调用，或任何其他导入机制，忽略部分插件可以提高构建性能
noParse: /^(vue|vue-router|vuex|vuex-router-sync|axios)$/,
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.vue$/,
loader: 'vue-loader',
include: resolve('src')
},
{
test: /\.pug$/,
loader: 'pug-plain-loader',
include: resolve('src')
},
{
test: /\.css$/,
oneOf: [
// 这里匹配 `<style module>`
{
resourceQuery: /module/,
use: [
{
// 只在生产环境下使用 CSS 提取，便于你在开发环境下进行热重载
loader: prod ? MiniCssExtractPlugin.loader : 'vue-style-loader',
options: {
publicPath: '../'
/*
复写css文件中资源路径
因为css文件中的外链是相对与css的，
我们抽离的css文件在可能会单独放在css文件夹内
引用其他如img/a.png会寻址错误
这种情况下所以单独需要配置../，复写其中资源的路径
*/
},
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true, // 开启 css module
localIdentName: 'v_[hash:6]' // 自定义生成的类名
}
},
'postcss-loader' // 自动加前缀以兼容其他浏览器
]
},
// 这里匹配普通的 .css 文件 或 <style>
{
use: [
{
loader: prod ? MiniCssExtractPlugin.loader : 'vue-style-loader',
options: {
publicPath: '../'
},
},
'css-loader',
'postcss-loader',
]
}
]
},
{
test: /\.less$/,
oneOf: [
// 这里匹配 `<style lang="less" module>`
{
resourceQuery: /module/,
use: [
{
loader: prod ? MiniCssExtractPlugin.loader : 'vue-style-loader',
options: {
publicPath: '../'
},
},
{
loader: 'css-loader',
options: {
importLoaders: 2,
modules: true, // 开启 css module
localIdentName: 'v_[hash:6]' // 自定义生成的类名
}
},
'postcss-loader',
'less-loader'
]
},
// 这里匹配普通的 .less 文件 或 <style lang="less">
{
use: [
{
loader: prod ? MiniCssExtractPlugin.loader : 'vue-style-loader',
options: {
publicPath: '../'
},
},
'css-loader',
'postcss-loader',
'less-loader'
]
}
]
},
{
test: /\.js$/,
loader: 'HappyPack/loader?id=js',
exclude: file => (
/node_modules/.test(file) && !/\.vue\.js/.test(file)
)
},
// url-loader 包含 file-loader，先把小于 4kb 的文件转换成 base64，然后交给 file-loader 去处理路径问题
{
test: /\.(png|jpe?g|gif|webp|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
name: 'img/[name]_[hash:6].[ext]',
limit: 4096,
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
name: 'fonts/[name]_[hash:6].[ext]',
limit: 4096,
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
name: 'media/[name]_[hash:6].[ext]',
limit: 4096,
}
},
]
},
plugins: [
new VueLoaderPlugin(), // vue-loader新用法
new HappyPack({ // 提高js编译速度
id: 'js',
loaders: [{
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}]
})
],
}webpack.dev.js
开发环境配置，主要是在本地启动一个服务
process.env.NODE_ENV = 'development' // 设置当前环境为开发环境 放在最上面
const config = require('./base.conf.js') // 配置文件
const baseWebpackConfig = require('./webpack.base.js')
const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin= require('friendly-errors-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = merge(baseWebpackConfig, {
mode: 'development', // 启用开发模式配置
output: {
publicPath: '/', // 资源引用路径前后都有斜杠
},
devServer: {
contentBase: path.join(__dirname, '..', `${config.base.fileName}`), // 用来指定index.html所在目录
clientLogLevel: "warning", // 热更新时阻止控制台显示消息 太多了 没加eslint none
overlay: {warnings: true, errors: true}, // webpack的eslint等错误、警告提示显示在页面中 全为true会停止页面运行
noInfo: true, // 每次启动和保存，只显示webpack编译的错误和警告信息
historyApiFallback: true, // 任意的跳转或404响应可以指向 index.html 页面
watchContentBase: true, // 修改没有被入口文件托管的文件，比如index.html文件，也会自动更新
compress: true, // 一切服务都启用gzip 压缩
hot: true, // 启动webpack热模块替换特性
inline: true, // 自动刷新
open: true, // 自动打开浏览器
host: config.dev.host,
port: config.dev.port,
proxy: config.dev.proxy,
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, '../src/assets/template.html'),
vendorJsName: 'vendor.dll.js', // 给模板引用
}),
new webpack.HotModuleReplacementPlugin(), // 开启webpack热更新功能
new webpack.NoEmitOnErrorsPlugin(), // webpack编译出错跳过报错阶段，在编译结束后报错
new FriendlyErrorsPlugin({ // webapck启动时在终端显示信息
compilationSuccessInfo: {
messages: [`Your application is running here: http://${config.dev.host}:${config.dev.port}`],
}
}),
new CopyWebpackPlugin( // 本地开发环境
[
{
from: path.resolve(__dirname, '../dist/static/js/vendor.dll.js'),
to: './static/',
}
],
{
ignore: ['.DS_Store'],
copyUnmodified: true,
// debug: "debug" // 是否打印复制的详细信息
}
)
],
devtool: 'cheap-module-eval-source-map',
})webpack.prod.js
生产环境配置
process.env.NODE_ENV = 'production' // 设置当前环境为生产环境 放在最上面
const config = require('./base.conf.js') // 配置文件
const baseWebpackConfig = require('./webpack.base.js')
const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCss = require('optimize-css-assets-webpack-plugin')
module.exports = merge(baseWebpackConfig, {
mode: 'production', // 启用生产模式配置
output: {
publicPath: './static/', // 资源引用路径前后都有斜杠
},
stats: {
// 未定义选项时，stats 选项的备用值(fallback value)（优先级高于 webpack 本地默认值）
all: undefined,
modules: false, // 添加构建模块信息
children: false, // 添加 children 信息
colors: true, // `webpack --colors` 等同于
},
plugins: [
new CleanWebpackPlugin(
['dist/*.html', 'dist/static/js', 'dist/static/css', 'dist/static/img', 'dist/static/fonts', 'dist/static/media'], // 删除匹配的文件
{
root: path.resolve(__dirname, '../'), // 重置到根路经
exclude: ['vendor.dll.js', 'vendor.manifest.json'], // 这几个文件不删除
verbose: false, // 开启在控制台输出信息
dry: false, // 启用删除文件
}
),
new CopyWebpackPlugin( // 这部分不会被 webpack loader 处理
[
{
from: path.resolve(__dirname, '../src/public/'),
to: 'public/',
},
],
{
ignore: ['.DS_Store'],
copyUnmodified: true,
// debug: "debug" // 是否打印复制的详细信息
}
),
new webpack.DllReferencePlugin({
manifest: require(`../${config.base.filePath}/js/vendor.manifest.json`),
context: path.join(__dirname, '..'), // 和dllplugin里面的context一致
}),
new MiniCssExtractPlugin({ // 提取css
filename: 'css/[name]_[contenthash:6].css'
}),
new OptimizeCss({ // 压缩提取的css
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: {discardComments: {removeAll: true}},
canPrint: true,
}),
new HtmlWebpackPlugin({
filename: '../index.html', // 相对于static的路径
template: path.resolve(__dirname, '../src/assets/template.html'),
hash: true,
minify: {
removeAttributeQuotes: true, // 清除属性引号
collapseWhitespace: true, // 清除多余空格
minifyJS: true, // 压缩javascript
},
vendorJsName: 'vendor.dll.js?' + new Date() * 1, // 给模板引用
chunksSortMode: "dependency",
})
],
performance: {
hints: "warning" // 打包资源超过 250kb 出提示
}
})webpack.dll.js
提取依赖的包，这样每次 build 的时候就不用处理依赖包了，提高打包速度
const config = require('./base.conf.js') // 配置文件
const package = require('../package.json')
const path = require('path')
const webpack = require('webpack')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
mode: 'production', // 启用生产模式配置
entry: {
// 如果使用了chrome的vue-devtool，那打包的时候把vue也排除掉，因为压缩过的vue是不能使用vue-devtool的
vendor: Object.keys(package.dependencies).filter((val) => {
return val != 'test'
})
},
stats: {
// 未定义选项时，stats 选项的备用值(fallback value)（优先级高于 webpack 本地默认值）
all: undefined,
modules: false, // 添加构建模块信息
children: false, // 添加 children 信息
colors: true, // `webpack --colors` 等同于
},
output: {
path: path.resolve(__dirname, `../${config.base.filePath}`),
filename: 'js/[name].dll.js',
library: '[name]' // 生成文件的映射关系，与下面DllPlugin中name配置对应
},
plugins: [
new CleanWebpackPlugin(
[`${config.base.filePath}`], // 匹配删除的文件
{
root: path.join(__dirname, '../'), // 必须先重置到根路经
verbose: true, // 开启在控制台输出信息
dry: false // 启用删除文件
}
),
new webpack.DllPlugin({ // 会生成一个json文件，里面是关于dll.js的一些配置信息
path: path.resolve(__dirname, `../${config.base.filePath}/js/[name].manifest.json`),
name: '[name]', // 与上面output中配置对应
context: path.join(__dirname, '..') // 上下文环境路径（必填，为了与DllReferencePlugin存在与同一上下文中）
})
]
}注意
1. mode
webpack增加了一个 mode 配置，只有两种值 development | production。对不同的环境会启用不同的配置：
| 选项 | 描述 |
|---|---|
development |
会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。 |
production |
会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin。 |
NamedModulesPlugin 当开启 HMR 的时候使用该插件会显示模块的相对路径，建议用于开发环境
ModuleConcatenationPlugin 预编译所有模块到一个闭包中，提升你的代码在浏览器中的执行速度
NoEmitOnErrorsPlugin 在编译出现错误时，直接退出
OccurrenceOrderPlugin 为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID
2. loader
解析转换源代码,从右到左执行，链式传递
include/exclude 手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）
css-loader 使你能够使用类似 @import 和 url(...) 的方法实现 require() 的功能
style-loader 将所有的计算后的样式加入页面中
3. plugins
解决 loader 无法实现的其他事
4. Manifest
资源映射文件，解析和加载模块
5. autoprefixer.browsers
browsers: ['> 0.5%', 'last 3 versions'] // 兼容性最广泛
browsers: ['> 0.5%', 'last 2 versions', 'ie > 8'] // 常用
browsers: ['> 0.5%', 'last 2 versions', 'Firefox ESR', 'not dead'] // 默认配置
对比 webpack3
1. 增加 mode 配置
- 默认生产环境开起了很多代码优化（minify, splite）
- 开发时开启注视和验证，并加上了evel devtool
- 生产环境不支持watching，开发环境优化了打包的速度
- 自动设置process.env.NODE_EVN到不同环境，也就是不使用DefinePlugin了
- 如果mode设置none，所有默认设置都会去掉
2. 自带环境变量
可在页面代码中直接获取当前环境变量 console.log(process.env.NODE_ENV)
3. webpack-cli
webpack 启动命令行的代码放入了 webpack-cli 中，只安装 webpack，那么它只能在 nodejs 中使用，不能再命令行中使用
4. UglifyJsPlugin
不需要使用这个插件，只需要使用 optimization.minimize 为 true 就行，production mode 下自动为 true
5. vue-cli3
vue inspect > output.js
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。