本基础配置基于 webpack@3.0 版本

文章目录

• 入口与输出
• entry
• output

• 清理打包目录
• 生成入口模板
• es6转义es5
• css合并
• css引入的文件
• html模板转换字符串
• devServer

入口与输出

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,
}
}