1、安装webpack4

npm i webpack@4.44.2 webpack-cli@4.0.0 -D

默认安装完成后只有一个node_modules目录和package.json文件。

-S和-D参数的区别：

npm i xxx -S 等同于：

npm install xxx --save //写入package.json的dependencies对象

npm i xxx -D 等同于：

npm install module_name --save-dev //写入package.json的devDependencies对象

2、运行

npx webpack

运行webpack会寻找配置文件webpack.config.js，如果没有，就用默认配置，默认输出文件夹是dist，文件名是main.js，这些信息都是在内存中托管的。

npx可以寻找node_modules里面的webpack命令，我们也可以在package.json自定义命令：

{

"scripts":{

"build":"webpack --config webpack.config.js"

},

"devDependencies": {

"webpack": "^4.44.2",

"webpack-cli": "^4.0.0"

},

"dependencies": {

"jquery": "^3.5.1"

}

}

运行npm run build命令即可。

3、基础配置

let path = require('path'); //node的path模块

module.exports = {

mode:'development',//模式，默认两种 production和development

entry:'./src/index.js', //入口

output:{

filename:'bundle.js', //打包后的文件名，名字随便起

path: path.resolve(__dirname,'build') // 必须是绝对路径

}

}

我们在src目录下创建index.js文件：

let a= require('./a.js');

console.log(a);

//a.js:

export var str = 'test'

4、处理html文件(html-webpack-plugin)

webpack的基本配置可以满足js文件的打包输出，但这还远远不够，比如——html文件该如何处理呢？

打包后的html文件，我们希望可以去掉换行和空格等来减少体积，然后还需要在引入的js文件上加入hash防止文件缓存，而且每次打包后的js文件尽量也要加上hash防止nginx层面的文件缓存等等，这时我们需要安装另外的plugin插件来扩展webpack的功能。

处理html的插件叫html-webpack-plugin，我们先来安装一下它。

npm i html-webpack-plugin -D

然后在webpack配置文件使用它：

let path = require('path');

let HtmlWebpackPlugin = require('html-webpack-plugin'); //处理html文件

module.exports = {

mode:'production',//模式，默认两种 production和development

entry:'./src/index.js', //入口

output:{

filename:'bundle.js', //打包后的文件名

path: path.resolve(__dirname,'build') // 必须是绝对路径

},

plugins:[

new HtmlWebpackPlugin({

template:'./src/index.html',

filename:'index.html',

minify:{

removeAttributeQuotes:true, // 去掉引号

collapseWhitespace:true, // 去掉空格

},

hash:true //加hash防止缓存

})

]

}

在运行前打包前我们需要在src目录下新建一个index.html，这个文件不需引入index.js，因为我们在webpack里面已经配置了entry入口信息，系统会自动帮我们把打包后的入口js文件在html中引入。

5、处理css文件(css-loader、style-loader)

一般css文件，我们都是在html中直接引入使用的。但目前我们已经有了统一的index.js入口，如果能将css也作为模块在js中引用和打包输出该多好！

先在src目录下建一个style.css文件做测试：

body{

background:green;

}

然后在index.js引入：

let str = require('./a.js')

console.log(str)

require('./style.css')

如果直接运行webpack打包命令，会输出如下错误信息：

You may need an appropriate loader to handle this file type,

currently no loaders are configured to process this file.

See https://webpack.js.org/concepts#loaders

提示说没用合适的loader处理这种file(css文件)，下面我们就要引入专门的loader来处理它。

安装css-loader和style-loader

cnpm i css-loader style-loader -D

这两个loader是分工明确的，css-loader负责css语法解析(比如@import)；style-loader负责将css插入到html的head标签里面。

let path = require('path');

let HtmlWebpackPlugin = require('html-webpack-plugin'); //处理html文件

module.exports = {

mode:'production',//模式，默认两种 production和development

entry:'./src/index.js', //入口

output:{

filename:'bundle.[hash:8].js', //打包后的文件名加入哈希(:8表示哈希值的位数)，可以防止nginx缓存

path: path.resolve(__dirname,'build') // 必须是绝对路径

},

plugins:[ //配置插件

new HtmlWebpackPlugin({

template:'./src/index.html',

filename:'index.html',

minify:{

removeAttributeQuotes:true, // 去掉引号

collapseWhitespace:true, // 去掉空格

},

hash:true //加hash防止引用文件缓存

})

],

module: {

//配置loader

// css-loader处理@import语法的；

// 而style-loader负责将css插入html的head标签里面的

// 多个loader需要使用数组[]

// loader的顺序默认是从右向左执行

rules: [

{test:/\.css$/,use:['style-loader','css-loader']} //test就是正则匹配，匹配到.css文件后，use就是用什么模块来处理它。

]

}

}

如果我们在index.html里面也定义了一些样式：

Title

body{

background:pink;

}

如果我们希望这个背景色的优先级更高的话：

let path = require('path');

let HtmlWebpackPlugin = require('html-webpack-plugin'); //处理html文件

module.exports = {

mode: 'production',//模式，默认两种 production和development

entry: './src/index.js', //入口

output: {

filename: 'bundle.[hash:8].js', //打包后的文件名加入哈希(:8表示哈希值的位数)，可以防止nginx缓存

path: path.resolve(__dirname, 'build') // 必须是绝对路径

},

plugins: [ //配置插件

new HtmlWebpackPlugin({

template: './src/index.html',

filename: 'index.html',

minify: {

removeAttributeQuotes: true, // 去掉引号

collapseWhitespace: true, // 去掉空格

},

hash: true //加hash防止引用文件缓存

})

],

module: { //配置loader

// css-loader处理@import语法的；

// 而style-loader负责将css插入html的head标签里面的

// 多个loader需要使用数组[]

// loader的顺序默认是从右向左执行

rules: [

{

test: /\.css$/,

use: [{

loader: 'style-loader', //loader可以传对象

options: {

insert: 'top' //将插入点调到最上面

}

},

'css-loader'

]

}

]

}

}

6、抽离css(mini-css-extract-plugin)

按以上方式打包出来的index.html是这样的：

Title

这种方式是直接将css写入了html里面，如果太多css样式的话会很不方便，我们还是喜欢用link引入的方式，这样就需借助另外的插件来处理了。

安装mini-css-extract-plugin插件：

cnpm i mini-css-extract-plugin -D

修改一下webpack的配置文件：

let path = require('path');

let HtmlWebpackPlugin = require('html-webpack-plugin'); //处理html文件

let MiniCssExtractPlugin = require('mini-css-extract-plugin');//抽离css

module.exports = {

mode: 'production',//模式，默认两种 production和development

entry: './src/index.js', //入口

output: {

filename: 'bundle.[hash:8].js', //打包后的文件名加入哈希(:8表示哈希值的位数)，可以防止nginx缓存

path: path.resolve(__dirname, 'build') // 必须是绝对路径

},

plugins: [ //配置插件

new HtmlWebpackPlugin({ // 处理html插件

template: './src/index.html',

filename: 'index.html',

minify: {

removeAttributeQuotes: true, // 去掉引号

collapseWhitespace: true, // 去掉空格

},

hash: true //加hash防止引用文件缓存

}),

new MiniCssExtractPlugin({ // 抽离css插件

filename: 'main.css',

})

],

module: { //配置loader

// css-loader处理@import语法的；

// 而style-loader负责将css插入html的head标签里面的

// 多个loader需要使用数组[]

// loader的顺序默认是从右向左执行

rules: [

{

test: /\.css$/,

use: [

// {

// loader: 'style-loader', //loader可以传对象

// options: {

// insert: 'top' //将插入点调到最上面

// }

// },

MiniCssExtractPlugin.loader,//去掉style-loader，以这个代替

'css-loader'

]

}

]

}

}

7、css自动加前缀(postcss-loader autoprefixer)

我们在写css3时，经常会遇到不同浏览器的前缀问题，如果一个一个加是非常烦的，如何自动添加呢？

这就需要新增loader来帮我们处理了：

cnpm i postcss-loader autoprefixer -D

这个autoprefixer在使用之前需创建一个配置文件。

postcss.config.css:

module.exports = {

plugins:[

require("autoprefixer")({

overrideBrowserslist:[

"defaults",

"Android 4.1",

"iOS 7.1",

"Chrome>31",

"ff>31",

"ie>=8",

"last 2 versions",

">0%"

]

})

]

}

然后修改一下webpack配置文件：

let path = require('path');

let HtmlWebpackPlugin = require('html-webpack-plugin'); //处理html文件

let MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {

mode: 'production',//模式，默认两种 production和development

entry: './src/index.js', //入口

output: {

filename: 'bundle.[hash:8].js', //打包后的文件名加入哈希(:8表示哈希值的位数)，可以防止nginx缓存

path: path.resolve(__dirname, 'build') // 必须是绝对路径

},

plugins: [ //配置插件

new HtmlWebpackPlugin({ // 处理html插件

template: './src/index.html',

filename: 'index.html',

minify: {

removeAttributeQuotes: true, // 去掉引号

collapseWhitespace: true, // 去掉空格

},

hash: true //加hash防止引用文件缓存

}),

new MiniCssExtractPlugin({ // 抽离css插件

filename: 'main.css',

})

],

module: { //配置loader

// css-loader处理@import语法的；

// 而style-loader负责将css插入html的head标签里面的

// 多个loader需要使用数组[]

// loader的顺序默认是从右向左执行

rules: [

{

test: /\.css$/,

use: [

// {

// loader: 'style-loader', //loader可以传对象

// options: {

// insert: 'top' //将插入点调到最上面

// }

// },

MiniCssExtractPlugin.loader,//去掉style-loader，以这个代替

'css-loader',

'postcss-loader' //先处理前缀，然后再交给css-loader解析

]

}

]

}

}

我们修改style.css来做一下测试:

body{

background:green;

transform: rotate(90deg);

}

运行一下打包命令，看看打包出来的main.css是否有前缀：

body{

background:green;

-webkit-transform: rotate(90deg);

-moz-transform: rotate(90deg);

-ms-transform: rotate(90deg);

-o-transform: rotate(90deg);

transform: rotate(90deg);

}

8、抽离的css如何优化？

我们发现，前面的配置打包出来的main.css并没有进行压缩处理，这个如何优化一下呢？

老办法，只能继续安装插件来解决。

cnpm i optimize-css-assets-webpack-plugin -D

然后是webpack配置文件：

let path = require('path');

let HtmlWebpackPlugin = require('html-webpack-plugin'); //处理html文件

let MiniCssExtractPlugin = require('mini-css-extract-plugin');//抽离css

let OptimizeCss = require('optimize-css-assets-webpack-plugin'); // 优化抽离的css

module.exports = {

mode: 'production',//模式，默认两种 production和development

entry: './src/index.js', //入口

output: {

filename: 'bundle.[hash:8].js', //打包后的文件名加入哈希(:8表示哈希值的位数)，可以防止nginx缓存

path: path.resolve(__dirname, 'build') // 必须是绝对路径

},

plugins: [ //配置插件

new HtmlWebpackPlugin({ // 处理html插件

template: './src/index.html',

filename: 'index.html',

minify: {

removeAttributeQuotes: true, // 去掉引号

collapseWhitespace: true, // 去掉空格

},

hash: true //加hash防止引用文件缓存

}),

new MiniCssExtractPlugin({ // 抽离css插件

filename: 'main.css',

})

],

module: { //配置loader

// css-loader处理@import语法的；

// 而style-loader负责将css插入html的head标签里面的

// 多个loader需要使用数组[]

// loader的顺序默认是从右向左执行

rules: [

{

test: /\.css$/,

use: [

// {

// loader: 'style-loader', //loader可以传对象

// options: {

// insert: 'top' //将插入点调到最上面

// }

// },

MiniCssExtractPlugin.loader,//去掉style-loader，以这个代替

'css-loader',

'postcss-loader'

]

}

]

},

optimization:{ // 优化项

minimizer:[

new OptimizeCss()

]

}

}

运行webpack命令后，css确实是压缩了，但js却没有压缩了，咋办呢？

没关系，我们可以引入uglifyjs-webpack-plugin插件来解决。

cnpm i uglifyjs-webpack-plugin -D

然后在webpack配置文件使用它：

let path = require('path');

let HtmlWebpackPlugin = require('html-webpack-plugin'); //处理html文件

let MiniCssExtractPlugin = require('mini-css-extract-plugin');//抽离css

let OptimizeCss = require('optimize-css-assets-webpack-plugin'); // 优化抽离的css

let UglifyJS = require('uglifyjs-webpack-plugin');

module.exports = {

mode: 'production',//模式，默认两种 production和development

entry: './src/index.js', //入口

output: {

filename: 'bundle.[hash:8].js', //打包后的文件名加入哈希(:8表示哈希值的位数)，可以防止nginx缓存

path: path.resolve(__dirname, 'build') // 必须是绝对路径

},

plugins: [ //配置插件

new HtmlWebpackPlugin({ // 处理html插件

template: './src/index.html',

filename: 'index.html',

minify: {

removeAttributeQuotes: true, // 去掉引号

collapseWhitespace: true, // 去掉空格

},

hash: true //加hash防止引用文件缓存

}),

new MiniCssExtractPlugin({ // 抽离css插件

filename: 'main.css',

})

],

module: { //配置loader

// css-loader处理@import语法的；

// 而style-loader负责将css插入html的head标签里面的

// 多个loader需要使用数组[]

// loader的顺序默认是从右向左执行

rules: [

{

test: /\.css$/,

use: [

// {

// loader: 'style-loader', //loader可以传对象

// options: {

// insert: 'top' //将插入点调到最上面

// }

// },

MiniCssExtractPlugin.loader,//去掉style-loader，以这个代替

'css-loader',

'postcss-loader'

]

}

]

},

optimization:{ // 优化项

minimizer:[

new UglifyJS({ //js压缩

cache:true,

sourceMap:true,

parallel:true

}),

new OptimizeCss() // css压缩

]

}

}