一、安装配置

• 【前提】安装node.js环境

  【官网下载】

  安装教程不赘述

• 创建项目文件夹

  例如创建如下文件夹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

• 打开浏览器调试

  

输出结果表示打包成功，大功告成 ！！！

二、使用配置文件进行打包

上一讲中我们打包没有用到

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.js

const 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.js`

const 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-server

• webpack-dev-server用来配置本地服务器
• 为 webpack 打包生成的文件提供web服务
• 自动刷新和热替换（HMR）

二、安装webpack-dev-server

npm 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

• 安装loader

  npm 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（之前配置好，详见）

    红色的背景，控制台输出hello

    

------------

六、使用babel编译ES6

• babel转化语法所需依赖项：

  • 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-plugin

  npm 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