webpack3.x基本配置与总结
基本配置
1.开始之前，请确定你已经安装了当前 Node 的较新版本。
2.然后在文件夹根目录下执行以下命令初始化项目并全局安装webpack：
1.$ cnpm init // 初始化项目
2.$ cnpm install -g webpack // 全局安装webpack
3.$ cnpm install webpack --save-dev // 当前目录安装
3.根目录下新建配置文件webpack.config.js
4.根目录下新建dist文件夹以作为打包后存放目录
5.根目录下新建src文件夹以作为实际项目存放目录
6.根目录下新建index.html作为打包的模板文件
这时整个目录结构应该是下图这样
设置打包命令
package.json文件scripts对象下新增
“webpack”: “webpack –config webpack.config.js –progress –display-modules –colors –display-reasons”
指定webpack –打包的过程 –打包的模块 –字体颜色 –打包的原因
以后打包时候只要运行 cnpm run webpack 就可以执行上面一长串的命令
配置webpack.config.js
module.exports = {}对象中一共有4个属性
一.entry: {}打包入口
可以指定一个或者多个需要打包的js文件，属性是自定义的name，值是需要打包的js文件。
entry: { main: './src/script/main.js', a: './src/script/a.js', b: './src/script/b.js', c: './src/script/c.js' },
二.output: {}打包出口
只可指定一个输出配置
output: { // 打包后的文件存放的路径 path: path.resolve(__dirname, './dist'), // 打包后的js文件放到dist/js文件下。需要通过占位符才能打包为多个js文件，否则会依次覆盖文件 filename: 'js/[name]-[chunkhash].js', // 打包后的路径前面加上动态地址 publicPath: 'http://cdn.com/' },
三.plugins: []
1.使用插件 html-webpack-plugin 自动生成html文件
多配置一次 new htmlWebpackPlugin({}) 就多打包一个html文件（也就是所谓多页面应用）
使用方法：
$ cnpm install html-webpack-plugin –save-dev
const htmlWebpackPlugin = require(‘html-webpack-plugin’);
new htmlWebpackPlugin({ filename: 'a-[chunkhash].html',// 打包后的htmnl文件名 template: 'index.html',// 按照根目录模板文件index.html打包 inject: 'body',// 指定打包好的<script>标签插入的位置 title: 'aaaaa',// title名 可以在模板中引用 a: 'bbbb',// 自定义的属性可以在根目录的index.html模板中引用 minify: { //打包后压缩 removeComments: true, // 打包后删除注释 collapseWhitespace: true // 打包后删除空格 }, chunks: ['a', 'main'],// 给页面指定要打包的js模块 excludeChunks: ['b', 'c'],// 除了数组里的js模块都打包 inlineSource: '.(js|css)$' //js|css全部内嵌进打包页面从而减少http请求( 提高加载性能） }),
注意上面的inlineSource: ‘.(js|css)$’功能需要安装插件 html-webpack-inline-source-plugin
2.使用插件 clean-webpack-plugin 每次打包前删除dist目录
使用方法：
$ cnpm install clean-webpack-plugin –save-dev
const cleanWebpackPlugin = require(‘clean-webpack-plugin’);
new cleanWebpackPlugin([‘dist’]), // 参数是要清理的目录的字符串数组
3.使用插件 html-webpack-inline-source-plugin 用script标签嵌入的方式，减少http请求( 提高加载性能）
使用方法：
$ cnpm install html-webpack-inline-source-plugin –save-dev
const htmlWebpackInlineSourcePlugin = require(‘html-webpack-inline-source-plugin’);
new htmlWebpackInlineSourcePlugin() // 参数是要清理的目录的字符串数组
四. module: {rules: []} //规定在不同模块被创建时如何处理模块的规则数组
1. 转译js文件
安装babel-loader
$ cnpm install babel-loader babel-core babel-preset-env webpack –save-dev
打包后如果报错找不到 babel-template 则安装 cnpm install babel-template –save-dev
{// 转译js文件
test: /\.js$/,// 匹配特定文件的正则表达式或正则表达式数组
include: path.resolve(__dirname, 'src'),// 指定需要转译的文件夹
exclude: path.resolve(__dirname, 'node_modules'),// 指定转译时忽略的文件夹
use: {
loader: 'babel-loader', // 依赖的loader
options: {
presets: ['env'] // 最新标准
}
}
},
2. 转译css文件
安装 css-loader style-loader $ cnpm install css-loader style-loader –save-dev
安装 postcss-loader $ cnpm install postcss-loader –save-dev
安装 postcss-import $ cnpm install postcss-import –save-dev //为一些css自动添加兼容浏览器的前缀
{ test: /\.css$/,// 匹配特定文件的正则表达式或正则表达式数组 use: [ // 应用于模块的 loader 使用列表 'style-loader', 'css-loader', { loader:'postcss-loader', // 兼容一些需要写前缀的css并压缩空格 options: { ident: 'postcss', plugins: (loader) => [ require('postcss-import')({ root: loader.resourcePath }), require('postcss-cssnext')(), require('autoprefixer')(), require('cssnano')() ] } } ] },
3. 转译less文件
安装 less $ cnpm install less –save-dev
安装 less-loader $ cnpm install less-loader –save-dev
{ test: /\.less$/,// 匹配特定文件的正则表达式或正则表达式数组 use: [ // 应用于模块的 loader 使用列表 'style-loader', 'css-loader', { loader:'postcss-loader', // 兼容一些需要写前缀的css并压缩空格 options: { ident: 'postcss', plugins: (loader) => [ require('postcss-import')({ root: loader.resourcePath }), require('postcss-cssnext')(), require('autoprefixer')(), require('cssnano')() ] } }, 'less-loader' ] },
注意less-loader要放到最前面，处理loader代码是从use:[]数组右边开始
4. 转译sass文件方法同less一样
安装 node-sass $ cnpm install node-sass –save-dev
安装 sass-loader $ cnpm install sass-loader –save-dev
5. 转译html文件
安装 html-loader $ cnpm install html-loader –save-dev
{// 转译html文件
test: /\.html$/,
use: [
'html-loader'
]
},
6. 转译ejs/tpl文件
安装 ejs-loader $ cnpm install ejs-loader –save-dev
{// 处理ejs 和 tpl文件 都可以
test: /\.tpl$/,
use: [
'ejs-loader'
]
},
7. 处理写在css中的图片
安装 file-loader $ cnpm install file-loader –save-dev
安装 url-loader $ cnpm install url-loader –save-dev
{// 处理写在css中的图片
test: /\.(png|jpg|gif|svg)$/i,
use: [
{
// 将图片处理成base64时候使用
loader: 'url-loader',
// loader: 'file-loader',
options: {
// 小于2k的图片处理成64编码，大于就交给file-loader处理
limit: 200,
// 图片打包后存在assets文件下[名称]-[5位哈希值].[自身文件类型]
name: 'assets/[name]-[hash:5].[ext]'
}
},
{// 压缩图片 右左顺序放到最前面
loader: 'image-webpack-loader'
}
]
}
注意：组件中引入图片必须用这个require方法
<img src=”${ require(‘../../assets/bg.jpg’) }”>
完整配置文件webpack.config.js
const htmlWebpackPlugin = require('html-webpack-plugin');
const cleanWebpackPlugin = require('clean-webpack-plugin');
const htmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
const path = require('path');
module.exports = {
entry: {
main: './src/script/main.js',
a: './src/script/a.js',
b: './src/script/b.js',
c: './src/script/c.js'
},
output: {
// 打包后的文件存放的路径
path: path.resolve(__dirname, './dist'),
// 打包后的js文件放到dist/js文件下。需要通过占位符才能打包为多个js文件，否则会依次覆盖文件
filename: 'js/[name]-[chunkhash].js',
publicPath: 'http://cdn.com/'// 打包后的路径前面加上动态地址
},
plugins: [
new htmlWebpackPlugin({
filename: 'a-[chunkhash].html',// 打包后的htmnl文件名
template: 'index.html',// 按照根目录模板文件index.html打包
inject: 'body',// 指定打包好的<script>标签插入的位置
title: 'aaaaa',// title名 可以在模板中引用
a: 'bbbb',// 自定义的属性可以在根目录的index.html模板中引用
minify: { //打包后压缩
removeComments: true, // 打包后删除注释
collapseWhitespace: true // 打包后删除空格
},
chunks: ['a', 'main'],// 给页面指定要打包的js模块
excludeChunks: ['b', 'c'],// 除了数组里的js模块都打包
inlineSource: '.(js|css)$' //js|css全部内嵌进打包页面
}),
new htmlWebpackPlugin({
filename: 'b-[chunkhash].html',// 打包后的htmnl文件名
template: 'index.html',// 指向根目录模板文件
inject: 'body',// 指定<script>标签插入的位置
title: 'bbbbbbbb',// title名 可以在模板中引用
minify: { //打包后压缩
removeComments: true, // 打包后删除注释
collapseWhitespace: true // 删除空格
},
chunks: ['b'],// 给页面指定要打包的js模块
excludeChunks: ['a', 'c'],// 除了数组里的js模块都打包
inlineSource: '.(js|css)$' //js|css全部内嵌进打包页面
}),
new htmlWebpackPlugin({
filename: 'c-[chunkhash].html',// 打包后的htmnl文件名
template: 'index.html',// 指向根目录模板文件
inject: 'body',// 指定<script>标签插入的位置
title: 'ccccccc',// title名 可以在模板中引用
minify: { //打包后压缩
removeComments: true, // 打包后删除注释
collapseWhitespace: true // 删除空格
}
chunks: ['c'],// 给页面指定要打包的js模块
excludeChunks: ['a', 'b'],// 除了数组里的js模块都打包
inlineSource: '.(js|css)$' //js|css全部内嵌进打包页面
}),
// 每次打包删除dist目录
new cleanWebpackPlugin(['dist']),// 第一个参数是要清理的目录的字符串数组
// 把页面src引入文件的方式，改成用script标签嵌入的方式，减少http请求( 提高加载性能）
new htmlWebpackInlineSourcePlugin()
],
module: {
rules: [// 用于规定在不同模块被创建时如何处理模块的规则数组
{// 转译js文件
test: /\.js$/,// 匹配特定文件的正则表达式或正则表达式数组
include: path.resolve(__dirname, 'src'),// 指定需要转译的文件夹
exclude: path.resolve(__dirname, 'node_modules'),// 指定转译时忽略的文件夹
use: {
loader: 'babel-loader', // 依赖的loader
options: {
presets: ['env'] // 最新标准
}
}
},
{
test: /\.css$/,// 匹配特定文件的正则表达式或正则表达式数组
use: [ // 应用于模块的 loader 使用列表
'style-loader',
'css-loader',
{
loader:'postcss-loader', // 兼容一些需要写前缀的css并压缩空格
options: {
ident: 'postcss',
plugins: (loader) => [
require('postcss-import')({ root: loader.resourcePath }),
require('postcss-cssnext')(),
require('autoprefixer')(),
require('cssnano')()
]
}
}
]
},
{
test: /\.less$/,// 匹配特定文件的正则表达式或正则表达式数组
use: [ // 应用于模块的 loader 使用列表
'style-loader',
'css-loader',
{
loader:'postcss-loader', // 兼容一些需要写前缀的css并压缩空格
options: {
ident: 'postcss',
plugins: (loader) => [
require('postcss-import')({ root: loader.resourcePath }),
require('postcss-cssnext')(),
require('autoprefixer')(),
require('cssnano')()
]
}
},
'less-loader'
]
},
{// 转译html文件
test: /\.html$/,
use: [
'html-loader'
]
},
{// 转译ejs/tpl文件
test: /\.tpl$/,
use: [
'ejs-loader'
]
},
{// 处理写在css中的图片
test: /\.(png|jpg|gif|svg)$/i,
use: [
{
// 将图片处理成base64时候使用
loader: 'url-loader',
// loader: 'file-loader',
options: {
// 小于2k的图片处理成64编码，大于就交给file-loader处理
limit: 200,
// 图片打包后存在assets文件下[名称]-[5位哈希值].[自身文件类型]
name: 'assets/[name]-[hash:5].[ext]'
}
},
{// 压缩图片 右左顺序放到最前面
loader: 'image-webpack-loader'
}
]
}
]
}
}
模块组成示意图