本基础配置基于 webpack@3. 版本*
入口与输出
entry
- 单个入口打包
entry设置为一个入口，打包出来的文件只有一个js。
__dirname为项目根路径（nodejs）。
module.exports = {
// 入口文件路径
entry: __dirname + '/index.js',
}
- 多个入口打包
entry设置为一个对象，包含多个属性（入口），打包后为多个文件。
module.exports = {
// 入口文件路径
entry: {
app: __dirname + '/index.js',
vendor: ['angular', '@uirouter/angularjs']
}
}
- 提取第三方模块
第三方模块由于在资源更新时无需更新，所以打包成单独的一个文件进行缓存。
module.exports = {
...
// 插件
plugins: [
...
// 防止第三方模块的文件 hash 值发生变化
new webpack.HashedModuleIdsPlugin(),
// 提取第三方模块
new webpack.optimize.CommonsChunkPlugin({
// 对应的entry数组vendor
name: 'vendor',
filename: 'js/vendor-[chunkhash:6].js'
})
]
}
- 提取公共模块
将重复的模块提取出来单独作为一个文件（发生在提取第三方模块之后）。
module.exports = {
...
// 插件
plugins: [
// 提取第三方模块
...
// 提取公共模块
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: 'js/common-[chunkhash:6].js'
})
]
}
output
-
[name]：文件名变量 -
[hash]：如果所有文件中，有一个文件发生变化则重新生成hash值，一般用于版本更新，[hash]作为目录 -
[chunkhash]：只有当前文件变化则重新生成chunkhash值，一般用于js文件 -
[contenthash]：用于css的hash值（css是以js的方式生成，需和js的chunkhash分开，不然css的变化会引起js的hash值变化），在extract-text-webpack-plugin插件中使用：new ExtractTextWebpackPlugin('css/base-[contenthash:6].css') -
publicPath：输出目录对应的公开URL，会影响后面导入的css以及css中引入的字体文件路径
module.exports = {
// 打包输出路径
output: {
path: __dirname + '/dist',
filename: 'js/[name]-[chunkhash:6].js',
publicPath: '/'
}
}
常用loader
清理打包目录
// 安装所需包
$ cnpm install --save-dev clean-webpack-plugin
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
plugins: [
new ClearWebpackPlugin(['dist'])
]
}
生成入口模板
// 安装所需包
$ cnpm install --save-dev html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new ClearWebpackPlugin({
filename: 'index.html',
// 默认模板
template: './index.html'
})
]
}
es6转义es5
// 安装所需包
$ cnpm install babel-loader babel-core babel-preset-es2015
// 配置js转义规则
module.exports = {
module: {
rules: [
{
test:/\.js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
],
// 排除的文件夹
exclude: /node_modules/
}
]
}
}
css合并
- 合并为单个文件
loader加载顺序： less-loader > css-loader > style-loader，这里使用css-loader的压缩功能。
// 安装所需包
$ cnpm install --save-dev extract-text-webpack-plugin css-loader style-loader less-loader less
// 配置css/less转义规则
let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.(css|less)$/,
// 合并
use: ExtractTextWebpackPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader', options: {
// 启用压缩
minimize: true
}
},
{loader: 'less-loader'}
]
})
}
]
},
plugins: [
new ExtractTextWebpackPlugin('css/style-[contenthash:6].css')
]
}
- 合并为多个文件
使用多个
ExtractTextWebpackPlugin实例生成，用exclude,include参数隔离第三方库。
// 安装所需包
$ cnpm install --save-dev extract-text-webpack-plugin css-loader style-loader less-loader less
// 配置css/less转义规则
let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
// 生成多个实例，base存放第三方库，app为自定义
let baseCss = new ExtractTextWebpackPlugin('css/base-[contenthash:6].css');
let appCss = new ExtractTextWebpackPlugin('css/app-[contenthash:6].css');
module.exports = {
module: {
rules: [
{
test: /\.(css|less)$/,
// 合并
use: appCss.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader', options: {
// 启用压缩
minimize: true
}
},
{loader: 'less-loader'}
]
}),
// 隔离第三方库
exclude: /node_modules/
},
{
test: /\.css$/,
// 合并
use: baseCss.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader', options: {
// 启用压缩
minimize: true
}
}
]
}),
// 隔离第三方库
include: /node_modules/
}
]
},
plugins: [
baseCss, appCss
]
}
css引入的文件
字体文件，图片
// 安装所需包
$ cnpm install file-loader
module.exports = {
module: {
rules: [
{
// 加载css中的字体文件
test: /(\.ttf|\.woff2|\.woff|\.eot|\.svg|\.dtd)/,
use: [
{
loader: "file-loader"
}
]
}
]
}
}
html模板转换字符串
// 安装所需包
$ cnpm install raw-loader
module.exports = {
module: {
rules: [
{
// 将html文件转换为字符串
test: /\.html$/,
use: [{
loader: "raw-loader"
}]
}
]
}
}
devServer
npm --save-dev webpack-dev-server
module.exports = {
devServer: {
// 服务器文件路径
contentBase: './dist',
// 不跳转url
historyApiFallback: true,
// inline模式url不用变化
inline: ture,
// 热更新
hot: true,
// 开启GZIP
compress: true,
}
}
