使用webpack4+,所以推荐 node版本8.5以上
在webpack中所有文件都被当成模块
初始化package.json
npm init -y
全局安装webpack（开发不推荐使用）
npm install webpack -g
本地安装
npm install webpack webpack-cli -D
webpack4.0+ 需要安装 webpack-cli 插件，-D 代表 开发的时候使用，发布时不会使用到。
在webpack中所以文件都是模 -js 模块 模块化（AMD CMD es6Module commonjs）
npx webpack
直接允许webpack，会允许node_modules 对应的bin下的webpack.cmd
webpack 配置
文件名：webpack.config.js
需要导入的模块
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//自动打包html到生产目录文件下
const {CleanWebpackPlugin } = require('clean-webpack-plugin');//自动清除文件
const Webpack = require('webpack');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')//抽离成css文件
const cssExtract = new ExtractTextWebpackPlugin('css/index.css')
const css1Extract = new ExtractTextWebpackPlugin('css/main.css')
const PurifycssWebpack = require('purifycss-webpack')//清除多余的样式
const glob = require('glob')//搜索样式
const CopyWebpackPlugin = require('copy-webpack-plugin')//拷贝作用
注意：所以配置都是在module.exports = {} 对象内
1 入口及出口文件配置
（1）单文件配置
entry:'./src/index.js',//入口
output:{
filename:'build.js',
chunkFilename:'[name].chunk.js',//非html引入的js文件
path:path.resolve('./build')
}//出口
其中filename的属性值，build文件名可以任意名
（2）引入多个js到同一个html文件中
entry:['index.js',.....]
entry为数组，即可引入多个js文件
（3）定义多个入口文件及出口文件
//定义多文件html时，需要使用对象
entry:{
index:'./src/index.js',
a:'./src/a.js'
},
output:{
filename:'[name].[hash:8].js'，
path:path.resolve('./build')
}
entry需要为对象类型，属性名为文件名，属性值为目标文件路径
output对象内，name为entry的属性名
这里有需要注意的一个点，多个html文件可能会引入不同的js，所以有如下配置
npm install html-webpack-plugin -D
plugins:[
new HtmlWebpackPlugin({
filename:'a.html',//html文件名
template:'./src/index.html'
title:'哈哈',
hash:true,
minify:{
removeAttributeQuotes:true,//去除属性的双引号
collapseWhitespace:true//html代码全部在一行
},
chunks:['index']//多文件配置，需要引入的js文件
},
new HtmlWebpackPlugin({
filename:'b.html'
template:'./src/index.html'
title:'哈哈',
hash:true,
minify:{
removeAttributeQuotes:true,//去除属性的双引号
collapseWhitespace:true//html代码全部在一行
},
chunks:['a']//多文件配置
}
)
]
2 开发阶段使用的服务器配置
webpack-dev-server -D
devServer:{
contentBase:'./build',//服务器开启时默认路径，生成的build是在内存中，若内存没有则找硬盘的文件
port:3000,//端口号
compress:true,//压缩服务器
open:true，//自动打开浏览器
hot:true//启动热更新
},
2.1 package.json配置快捷键
“scripts”:{
"build":"webpack",
"start":"webpack-dev-server"
}
现在可使用 npm run dev 或者 npm run build 来开启服务器或者打包文件
3 支持css等非js模块配置
npm install style-loader css-loader -D
module:{
rules:[//读取是由右往左写
{
test:/.css$/,use:[
{loader:'style-loader',options:''},
{loader:'css-loader',
options:{
importLoaders:2 //作用：当css文件引用css文件时，可以再加载 postcss-loader等
modules:true //作用：模块化，去除css耦合
}
} //有热更新功能
]
}
]
}
缺点，所有样式都内联到html中，但是实际上是写入到js文件中。当css样式多时，会造成js文件过大
所以采用，抽离样式，抽离到css文件，通过css文件引用。有两种插件，推荐使用第一种，如下：
npm install extract-text-webpack-plugin@next -D //稳定（建议使用）
npm install mini-css-extract-plugin -D //不太稳定
（1）抽离为一个文件
module: {
rules: [{
test: /.css$/,
use: ExtractTextWebpackPlugin.extract({
use: [
{ loader: 'css-loader' }
]
})
}]
}，
plugins: [
new ExtractTextWebpackPlugin({
filename: 'css/index.css' //抽离出的文件名及路径
})
]
（2）抽离为两个文件
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')//抽离成css文件
const cssExtract = new ExtractTextWebpackPlugin('css/index.css')
const css1Extract = new ExtractTextWebpackPlugin('css/main.css')
module: {
rules: [{
test: /.css$/,
use: cssExtract.extract({
use: [
{ loader: 'css-loader' }
]
})
}]
},
plugins: [
cssExtract,
css1Extract
]
缺点，抽离css文件，只是当发布时才使用。如果在开发中，则作用不大，所以使用下列代码段
（3）禁用抽离，使用内联样式
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')//抽离成css文件
const cssExtract = new ExtractTextWebpackPlugin({
filename:'css/index.css',
disable:true
})
module: {
rules: [{
test: /.css$/,
use: cssExtract.extract({
fallback:'style-loader'
use: [
{ loader: 'css-loader' }
]
})
}]
}
3.1 引用css文件时，只调用用到的样式插件
npm i purifycss-webpack purify-css glob -D
const PurifycssWebpack = require('purifycss-webpack')
const glob = require('glob')
plugins：[
new PurifycssWebpack({
paths:glob.sync(path.resolve('src/*.html'))
})
]
注意：使用 new PurifycssWebpack() 时，需要在 HtmlWebpackPlugin() 后面
3.2 自动在样式添加前缀
npm i postcss-loader autoprefixer -D
module: {
rules: [{
test: /.css$/,
use: cssExtract.extract({
fallback:'style-loader'
use: [
{ loader: 'css-loader' },
{ loader:'postcss-loader'}
]
})
}]
}
创建 postcss.config.js
module.exports = {
plugins:[
require('autoprefixer')
]
}
4 启动热更新配置
plugins:[
new Webpack.HotModuleReplacementPlugin(),//启动热更新，热更新：只更新一部分。
//如不配置，则更新全部，插件，vuex等全部更新并且丢失
]
在js文件下
if(module.hot){
module.hot.accept(); //页面更新，则刷新
module.hot.accept('./a.js',function(){
/******/
})
}
5 每次运行清除build下的文件配置
npm install clean-webpack-plugin -D
plugins:[
new CleanWebpackPlugin(), //清除build文件夹下的文件
]
6 拷贝插件
不打包不压缩，只启动复制的作用
npm i copy-webpack-plugin -D
plugins:[
new CopyWebpackPlugin([{
from:'./src/doc',
to:'public'
}]
)]