webpack的详细使用过程

一.webpack 就是前端的一个工具，这个工具已经被托管到了NPM官网上；

1. 新建一个项目的空白目录，并在在终端中，cd到项目的根目录，执行npm init -y 初始化项目
2. 装包：运行 cnpm i webpack webpack-cli -D 安装项目构建所需要的 webpack
3. 打开 package.json文件，在 scripts 节点中，新增一个 dev 的节点：
   “scripts”: {
   “test”: “echo “Error: no test specified” && exit 1”,
   “dev”: “webpack”
   },
4. 在项目根目录中，新建一个 webpack.config.js 配置文件，内容如下：
   // 这是 使用 Node 语法， 向外导出一个 配置对象
   module.exports = {
   mode: ‘production’ // production development
   }
5. 在项目根目录中，新增一个 src 目录，并，在 src 目录中，新建一个 index.js 文件，作为 webpack 构建的入口；
6. 在终端中，直接运行 npm run dev 启动webpack进行项目构建；

二. 实现webpack的实时打包构建

1. 借助于 webpack-dev-sever 这个工具，能够实现 webpack 的实时打包构建；
2. 运行cnpm i webpack-dev-server -D 安装包
3. 打开package.json文件，把 scripts 节点下的 dev 脚本，修改为如下配置：
   “scripts”: {
   “test”: “echo “Error: no test specified” && exit 1”,
   “dev”: “webpack-dev-server”
   },
4. 修改 index.html 文件中的 script 的 src, 让 src 指向 内存中根目录下的 /main.js
   

node ./app.js nodemon ./app.js

webpack webpack-dev-server

三. 使用html-webpack-plugin插件配置启动页面

1. 装包cnpm i html-webpack-plugin -D
2. 在 webpack.config.js中，导入 插件：
   // 导入 html-webpack-plugin，从而帮我们自动把 打包好的 main.js 注入到 index.html 页面中
   // 同时，html-webpack-plugin 可以把 磁盘上的 index.html 页面，复制一份并托管到 内存中；
   const HtmlPlugin = require(‘html-webpack-plugin’)
   const htmlPlugin = new HtmlPlugin({
   // 传递一个配置对象
   template: ‘./src/index.html’, // 指定路径，表示 要根据哪个物理磁盘上的页面，生成内存中的页面
   filename: ‘index.html’ // 指定，内存中生成的页面的名称
   })
3. 把 创建好的 htmlPlugin 对象，挂载到 plugins数组中：
   // webpack 这个构建工具，是基于 Node.js 开发出来的一个前端工具
   module.exports = {
   mode: ‘development’, // 当前处于开发模式
   plugins: [htmlPlugin] // 插件数组
   }

四. 实现自动打开浏览器、热更新和配置浏览器的默认端口号

• –open 自动打开浏览器
• –host 配置IP地址
• –port 配置 端口号
• –hot 热更新；最新的代码，以打补丁的形式，替换到页面上，加快编译的速度；

五. 打包处理非js文件

5-1 使用webpack打包css文件

1. 运行 cnpm i style-loader css-loader -D
2. 在webpack.config.js配置文件的导出对象上，新增一个module对象节点，在 对象中，新增一个 rules数组，格式如下：
   module: {
   // 所有非JS结尾的文件类型模块，都在这里进行配置
   rules: [
   // 文件处理规则
   { test: /.css$/, use: [‘style-loader’, ‘css-loader’] } // 配置 所有 CSS 文件的 处理 loader
   ]
   }

5-2.使用webpack打包less文件

1. 运行 cnpm i less-loader less -D
2. 在rules中新增一个规则：
   { test: /.less$/, use: [‘style-loader’, ‘css-loader’, ‘less-loader’] } // 处理 less 文件的 loader

5-3 使用webpack打包scss文件

1. 运行 cnpm i sass-loader node-sass -D
2. 在 rules中新增一个规则：
   { test: /.scss$/, use: [‘style-loader’, ‘css-loader’, ‘sass-loader’] } // 处理 scss 文件的loader

5-4.使用webpack处理css中的路径

1. 运行 cnpm i url-loader -D
2. 在 rules中新增一个规则：
   { test: /.jpg|jpeg|png|gif|svg$/, use: ‘url-loader’ } // 处理 样式表中 图片路径的loader

5-5. 使用babel处理高级JS语法

1. 运行命令安装两套包：

   • 第一个套命令：
     cnpm install babel-loader@7 babel-core babel-plugin-transform-runtime -D
     cnpm i babel-preset-stage-0 babel-preset-env -D
   • 第二套命令：
     暂时不用

2. 添加 rules规则：
   { test: /.jsKaTeX parse error: Expected 'EOF', got '}' at position 49: …/node_modules/ }̲ // 处理JS高级语法的lo…/,
   exclude: /node_modules/,
   use: {
   loader: ‘babel-loader’,
   options: {
   presets: [’@babel/preset-env’]
   }
   }
   }

3. 在项目根目录中，添加一个 .babelrc 配置文件：
   {
   “presets”: [“env”, “stage-0”],
   “plugins”: [“transform-runtime”]
   }

5-6. 处理 字体文件路径问题

1. 还是使用 url-loader 进行处理
2. 添加 rules规则：
   { test: /.ttf|woff|woff2|eot|svg$/, use: ‘url-loader’ }, // 处理 字体 文件的 loader