一、安装配置【前提】安装node.js环境【官网下载】https://nodejs.org/zh-cn/安装教程不赘述创建项目文件夹例如创建如下文件夹webpack_demo1创建配置项npm init -y生成一个package.json文件 如下图全局安装webpack （不推荐，进行下一步操作）npm install webpack -g局部安装webpack(推荐)npm install webpack –save-dev另外，webpack 4要求安装包npm install webpack-cli –save-dev一起安装npm install webpack webpack-cli –save-dev以下表示安装成功创建入口文件./src/index.js任意编写index.js文件内容用于测试配置生产和开发模式打开package.json文件添加如下脚本"scripts": { “dev”: “webpack –mode development”, “build”: “webpack –mode production”}现在运行：npm run dev生成dist/main.js ，其中 main.js 没有压缩npm run dev 表示开发模式npm run build此时的main.js 被压缩 ，这便是生产模式接下来看看打包的js文件是否能够使用创建index.html 引入打包好的main.js<!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <meta http-equiv=“X-UA-Compatible” content=“ie=edge”> <title>Document</title> <script src="./main.js" charset=“utf-8”></script></head><body></body></html>打开浏览器调试输出结果表示打包成功，大功告成 ！！！二、使用配置文件进行打包上一讲中我们打包没有用到webpack.config.js配置文件，webpack4把自己定位为一个零配置的工具。这一讲学习配置文件使用，更好地学习webpack。根目录下新建一个webpack.config.js文件 （记载配置信息）配置文件 const path = require(‘path’); module.exports = { entry:’./public/index.js’, output:{ path:path.resolve(__dirname,‘build’), filename:‘bundle.js’ } }字段意义entry入口，所需打包的文件的路径output出口path文件打包后存放的路径path.solve()将路径或者路径片段的序列处理成绝对路径_dirname表示当前文件所在目录的绝对路径filename打包后文件的名称按照配置项新建一个入口文件public/index.js运行npm run dev三、配置入口和出口的进阶使用一、单出口形式webpack.config.jsconst path = require(‘path’);module.exports = { //单出口形式 entry:[’./public/index.js’,’./public/index2.js’],//有多个文件 output:{ path:path.resolve(__dirname,‘build’), filename:‘bundle.js’ }}运行npm run dev生成唯一的打包文件 bundle.js二、多出口形式webpack.config.jsconst path = require(‘path’);module.exports = { //多出口形式 entry:{ entryOne:’./public/entryOne/index.js’, entryTwo:’./public/entryTwo/index.js’, }, output:{ path:path.resolve(__dirname,‘build’), filename:’[name].js’ }}文件结构运行npm run dev生成两个打包文件四、配置webpack-dev-server一、了解 webpack-dev-serverwebpack-dev-server用来配置本地服务器为 webpack 打包生成的文件提供web服务自动刷新和热替换（HMR）二、安装webpack-dev-servernpm install –save-dev webpack-dev-server三、 配置webpack.config.js文件devServer:{ contentBase:’./dist’, //设置服务器访问的基本目录 host:’localhost’, //服务器的ip地址 port:8080, //端口 open:true //自动打开页面}四、配置package.json"scripts": { “start”: “webpack-dev-server –mode development” }五、运行命令npm run dev 打包文件npm run start 打开服务器五、打包css安装loadernpm install style-loader css-loader –save-dev配置loader在webpack.config.js文件里配置module中的rules，如下：test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。use 属性，表示进行转换时，应该使用哪个 loader。module.exports = { /入口和出口文件可以不用配置，默认/ module:{ rules:[ { test:/.css$/, use:[‘style-loader’,‘css-loader’]//引入的顺序至关重要,不可改变 } ] }}测试是否打包成功在src下创建index.css文件在index.js中引入index.css文件require(’!style-loader!css-loader!./index.css’);进行打包后运行 npm run dev（之前配置好，详见第一篇文章：webpack4 基础配置）红色的背景，控制台输出hello————六、使用babel编译ES6babel转化语法所需依赖项：babel-loader： 负责 es6 语法转化babel-core： babel核心包babel-preset-env：告诉babel使用哪种转码规则进行文件处理安装依赖npm install babel-loader @babel/core @babel/preset-env –save-dev配置webpack.config.js文件 { test:/.js$/, exclude:/node_modules/, use:‘babel-loader’ }新建 .babelrc 文件配置转换规则{ “presets”:["@babel/preset-env"]}或者直接在webpack.config.js文件中配置规则 { test:/.js$/, exclude:/node_modules/, use:{ loader:‘babel-loader’, options:{ presets:[’@babel/preset-env’] } } }七、提取分离打包css前面讲过 将css文件引入到js文件中，然后一起打包成js文件，现在我们学习单独提取分离css并且打包。安装插件min-css-extract-pluginnpm install mini-css-extract-plugin –save-dev配置webpack.config.js引入插件 const MiniCssPlugin = require(“mini-css-extract-plugin”);rules 设置 { test:/.css$/, use:[MiniCssPlugin.loader,‘css-loader’] }plugins 设置 new MiniCssPlugin({ filename:’./css/[name].css’ })截图运行命令打包八、压缩优化css压缩css,去除注释安装插件npm install –save-dev optimize-css-assets-webpack-plugin配置webpack.config.js头部引入插件const OptimizeCssAssetsPlugin = require(“optimize-css-assets-webpack-plugin”) ` | 参数 | 意义 | | ————————- | ———————————————————— | | assetNameRegExp | 正则表达式，用于匹配需要优化或者压缩的资源名。默认值是<br/>/.css$/g | | cssProcessor | 用于压缩和优化CSS 的处理器，默认是 cssnano. | | cssProcessorPluginOptions | 传递给cssProcessor的插件选项，默认为{} | | canPrint | 表示插件能够在console中打印信息，默认值是true | | discardComments | 去除注释 |在plugins模块引入 new OptimizeCssAssetsPlugin({ assetNameRegExp:/.css$/g, cssProcessor:require(“cssnano”), cssProcessorPluginOptions:{ preset:[‘default’,{discardComments:{removeAll:true}}] }, canPrint:true })运行打包命令之后就可以压缩webpack –mode development