Webpack系列—快速入门
原文地址：https://github.com/huruji/blog/issues/3
入口
单文件入口
指定entry键值
const config = {
entry: './yourpath/file.js'
};
module.exports = config
上面的是以下的简写：
const config = {
entry: {
main: './yourpath/file.js'
}
};
module.exports = config
多文件入口
对entry采用对象写法，指定对应的键值对，为了输出这多个文件可以使用占位符
const path = require('path');
const config = {
entry: {
app1: './src/main.js',
app2: './src/app.js'
},
output: {
filename: '[name].bundle.js',
path: path.join(__dirname, 'dist')
}
};
module.exports = config;
输出
指定打包构建之后输出的文件
单文件输出
指定output键值，值为对象，对象中指定path和filename
const path = require('path');
const config = {
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
}
};
module.exports = config;
多文件输出
使用占位符，输出文件将按照多文件入口指定的键来替代占位符
const path = require('path');
const config = {
entry: {
app1: './src/main.js',
app2: './src/app.js'
},
output: {
filename: '[name].bundle.js',
path: path.join(__dirname, 'dist')
}
};
module.exports = config;
Loader
Loader可以在加载模块时预处理文件，类似于gulp中的task。配置loader需要在module选项下指定对应后缀名相应的rules，使用test正则指定后缀名，使用use指定相应的loader
允许在js中import css
需要使用style-loader和css-loader，首先需要安装：
npm i css-loader style-loader --save-dev
使用loader
const path = require('path');
const config = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}]
}
};
module.exports = config;
模块文件写法：
import './css/main.css'
允许加载图片
需要使用file-loader,首先安装：
npm i file-loader --save-dev
使用：
const path = require('path');
const config = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [{
test: /\.(png|jpg|svg|gif)$/,
use: [
'file-loader'
]
}]
}
};
module.exports = config;
模块文件写法：
import logo from './image/logo.svg';
插件
插件的目的在于解决loader解决不了的事情，使用插件指定plugins选项即可，需要注意的使用插件需要引入插件。如使用HtmlWebpackPlugin插件为我们自动生成一个html文件。
首先安装：
npm i --save-dev html-webpack-plugin
配置webpack
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const config = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},{
test: /\.(png|jpg|svg|gif)$/,
use: [
'file-loader'
]
}]
},
plugins: [
new HtmlWebpackPlugin({
title: '我的webpack'
})
]
};
module.exports = config;
使用source map
源代码被webpack打包之后，会很难追踪到原始的代码的位置，使用source map功能，可以将编译后的代码映射回原始代码位置，指定devtool选项即可：
const config = {
// ....
devtool: 'inline-source-map'
};
module.exports = config;
使用webpack-dev-server
webpack-dev-server提供了一个简单的web服务器，并能够实时重新加载使用webpack需要先安装：
npm i --save-dev webpack-dev-server
在配置文件中指定devServer选项，告诉服务器在哪里寻找文件
const config = {
// ....
devServer: {
contentBase: './dist'
}
};
module.exports = config;
使用命令行运行命令或者在package.json中指定scripts
webpack-dev-server --open
此时服务将运行在8080端口，其中open选项表示服务开启之后立即在默认浏览器中打开页面。
开启热更新
开启热更新很简单，只需要更新webpack-dev-server配置，增加hot选项，同时使用webpack自带的HMR插件
const config = {
// ....
devServer: {
contentBase: './dist',
hot:true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
module.exports = config;
精简输出
在实际中是开发中可能有些模块的方法并没有被使用，也就是说，在开发中这些方法并没有被import，这些没有被使用的代码应该被删除的，使用uglifyjs-webpack-plugin插件可以帮助我们删除这些代码，同时做代码混淆和压缩。
安装：
npm i -D uglifyjf-webpack-plugin
使用：
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const config = {
// ....
plugins: [
new UglifyJSPlugin()
]
};
module.exports = config;
生产和开发构建分离
生产和开发中的构建肯定是不同，生产中侧重于一个更好的开发体验，而生产环境中则需要更多的性能优化，更小的chunk。webpakck可以指定命令运行以来的配置文件，通过在package.json中写入script是一种不错的方式。而生产和开发中的配置肯定有很多重复的地方，使用webpack-merge可以合并通用配置
安装：
npm i -D webpack-merge
webpack.common.js
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const config = {
entry: './src/main.js',
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'My App'
})
],
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
}
module.exports = config;
webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common');
const config = merge(common, {
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
}
});
module.exports = config;
webpack.prod.js
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common');
const config = merge(common, {
plugins: [
new UglifyJSPlugin()
]
});
module.exports = config;
package.json
{
// ......
"scripts": {
"start": "webpack-dev-server --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
},
// ......
}
许多lib通过与process.env.NODE_ENV环境关联来决定lib中使用哪些内容，使用webpack内置的DefinePlugin可以为所有依赖指定这个变量。
const config = {
// ......
plugins: [
new webpack.DefinePlugin({
'process.env': {
'MODE_ENV': JSON.stringify('production')
}
})
]
// ......
}
让输出的文件名带有哈希值
让文件名带有hash可以方便在生产环境中用户及时更新缓存，让文件名带有hash可以使用和构建相关的[hash]占位符，也可以使用与chunk相关的[chunkhash]占位符，通常后一种是更好的选择
const config = {
//......
output: {
filename: [name].[chunkhash].js,
path: path.join(__dirname, 'dist')
}
// ......
}
让webpack不打包指定的lib
在开发中有些时候我们需要webpack不打包某些lib，这在我们开发lib的时候特别常见，比如我们为react开发插件，不希望打包的时候包含react。使用配置的external选项可以做到，
const config = {
"externals": [
"react",
"react-dom"
]
}
