前端项目构建打包工具介绍

  1. 为什么需要这些项目构建打包工具
  2. 项目构建打包工具有哪些
  3. webpack介绍
    1. 是一款打包构建工具,目前就流行打包构建工具
    2. webpack特点: 一切皆模块, 能把所有资源打包成浏览器能识别的 html,css,js,png
    3. 官网地址: https://webpack.docschina.org/

安装webpack和webpack-cli

  1. npm i webpack -g
  2. npm i webpack-cli -g

(一) webpack配置-入口和出口

(1) 入口和出口概念

入口: 入口起点(entry point)指示webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
出口: output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。

(2) 配置步骤

  1. 新建文件夹demo1
  2. 新建main.js,m1.js,m2.js ```javascript // main.js import M1 from ‘./m1.js’ console.log(‘我是mian.js’) console.log(M1.msg);

// m1.js import M2 from ‘./m2.js’; console.log(M2.msg); export default { name: ‘m1’, msg: ‘我是模块m1’ }

// m2.js export default { name: ‘模块2’, msg: ‘我是模块2’ }

// webpack.config.js const path = require(‘path’);

module.exports = { //1.配置入口文件 entry: ‘./main.js’, //2.配置输入的名称和位置 output: { //a.文件名 filename: ‘main.js’, //b.存放的路径 path: path.resolve(__dirname, ‘dist’) }, //3.打包模式 development-开发模式,production-生产模式 mode: ‘production’ }

  2. 3. 运行webpack命令,打包成功会在本地创建一个dist文件夹,里面有一个main.js
  3. 3. 给main.js添加hash值后缀, 每次文件与变动, hash值都发生改变
  4. ```javascript
  5.   output: {
  6.         //a.文件名 [hash:7]会生成7个字符的hash值
  7.         filename: 'main-[hash:7].js',
  8.         //b.存放的路径
  9.         path: path.resolve(__dirname, 'dist')
  10.     },

(二) loader配置

(1) loader是什么

在webpack眼里,一切皆模块,js、css、img、txt、vue等统统都是模块，但webpack默认只认识js模块，其它文件都需要配置相应的加载器（loader）才能正确的识别，比如css要配css-loader，vue要配vue-loader

(2) 配置css-loader

  1. 新建文件夹demo2.1
  2. npm init 初始化package.json

  3. 安装相关模块

    1. npm init -y
    2. npm i style-loader --save-dev
    3. npm i css-loader --save-dev

  4. 新建main.js, main.css, webpack.config.js ```javascript // main.js import ‘./main.css’;

// main.css body { background-color: gray; }

h3 { color: red; }

// webpack.config.js const path = require(‘path’);

module.exports = { entry: ‘./main.js’, output: { filename: ‘main.js’, path: path.resolve(__dirname, ‘dist’) }, mode: ‘development’, // 对模块进行配置 module: { // 规则 rules: [{ // 意思是: 遇到.css结尾的文件, 先使用style-loader和css-loader进行处理 test: /.css$/, use: [‘style-loader’, ‘css-loader’] }] } }

  2. 5. 运行打包命令 webpack
  3. 5. 检验: 在dist(打包后生成的文件夹)文件夹内新建index.html,导入main.js,然后打开,看网页的背景颜色是否为灰色
  5. <a name="3d21790c"></a>
  6. #### (3) 配置less-loader
  8. 1. 新建demo2.2文件夹
  9. 1. 安装相关模块
  10. ```javascript
  11. npm init -y
  12. npm i style-loader --save-dev 
  13. npm i css-loader --save-dev 
  14. npm i less-loader --save-dev  
  15. npm i less --save-dev 
  17. // 批量安装
  18. npm i style-loader css-loader less-loader less --save-dev
  1. 新建main.js, main.less, webpack.config.js ```javascript // main.js import ‘./main.less’;

// main.less body { background-color: gainsboro; h3 { color: green; } }

// webpack.config.js const path = require(‘path’); module.exports = { entry: ‘./main.js’, output: { filename: ‘main.js’, path: path.resolve(__dirname, ‘dist’) }, mode: ‘development’, module: { rules: [{ test: /.less$/, use: [ ‘style-loader’, ‘css-loader’, ‘less-loader’ ] }] } }

  2. 3. 检验:在dist文件夹新建index.html,导入main.js, 打开看看h3是否变了颜色
  3. <a name="1fRoE"></a>
  4. ## (三) plugins(插件)
  5. <a name="767fa455"></a>
  6. #### (1) 插件是什么,有什么用
  7. loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
  8. <a name="b5dd6258"></a>
  9. #### (2) 配置生成html的插件
  10. <a name="WZt8H"></a>
  11. #### 例子1: 自动生成index.html文件
  13. 1. 新建demo3.1文件夹
  14. 1. 安装html-webpack-plugin
  15. ```javascript
  16. npm init -y
  17. npm i html-webpack-plugin
  1. 新建main.js, webpack.config.js ```javascript // main.js console.log(‘今天的天气贼好’);

// webpack.config.js const path = require(‘path’); const htmlWebpackPlugin = require(‘html-webpack-plugin’);

module.exports = { entry: ‘./main.js’, output: { filename: ‘main.js’, path: path.resolve(__dirname, ‘dist’) }, mode: ‘development’, // 配置插件 plugins: [ new htmlWebpackPlugin() ] }

  2. 4. 检查dist文件夹,并打开index.html文件查看
  4. <a name="eXMMl"></a>
  5. #### 例子2: 使用模板生成index.html文件
  7. 1. 新建demo3.2文件夹
  8. 1. 安装html-webpack-plugin
  9. 1. 新建main.js, webpack.config.js, tpl.html
  10. ```javascript
  11. // main.js
  12. console.log('今天的天气贼好');
  14. // tpl.html
  15. <!DOCTYPE html>
  16. <html lang="en"> 
  17. <head>
  18.     <meta charset="UTF-8">
  19.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  20.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  21.     <title>Document</title>
  22. </head> 
  23. <body> 
  24.     <div id="app">
  25.         <ul>
  26.             <li>xxx</li>
  27.             <li>xxx</li>
  28.             <li>xxx</li> 
  29.         </ul>
  30.     </div>
  31. </body>
  32. </html>
  34. // webpack.config.js
  35. const path = require('path');
  36. const htmlWebpackPlugin = require('html-webpack-plugin');
  38. module.exports = {
  39.     entry: './main.js',
  40.     output: {
  41.         filename: 'main.js',
  42.         path: path.resolve(__dirname, 'dist')
  43.     },
  44.     mode: 'development',
  45.     // 配置插件
  46.     plugins: [
  47.         new htmlWebpackPlugin({
  48.             filename: 'index.html',
  49.             template: './tpl.html'
  50.         })
  51.     ]
  52. }

例子3: 配置生成全局变量的插件

  1. 在例子2的基础修改main.js和webpack.config.js

  2. 在main.js上添加以下代码

    1. console.log(username);
    2. console.log(process.env.baseUrl);

  3. 在webpack.config.js的plugins里面添加以下代码 ```javascript // 安装webpack npm i webpack —save const webpack = require(‘webpack’);

new webpack.DefinePlugin({ // 值是字符串的时候需要多加一个引号 ‘username’: ‘“老胡”‘, ‘process.env.baseUrl’: ‘“http://huruqing.cn“‘ })

  1. ```javascript
  2. npm i html-webpack-plugin webpack

  1. 检验: 运行webpack打包命令,打开dist里的index.html文件,检查控制台的打印结果

    (六) webpack-dev-server配置

  2. 安装相关模块

    1. npm init -y
    2. npm i webpack@4.46.0
    3. npm i webpack-cli@3.3.12 
    4. npm i html-webpack-plugin@4.5.2
    5. npm i webpack-dev-server  // 本地全局都需要安装
    6. npm i webpack-dev-server -g

  3. main.js代码

    1. document.body.innerHTML = '<h3>webpack-dev-server</h3>'

  4. webpack.config.js代码

    1. const path = require('path');
    2. var HtmlWebpackPlugin = require('html-webpack-plugin');
    3. module.exports = {
    4.  mode: 'development',
    5.  entry: './main.js',
    6.  output: {
    7.      path: path.resolve(__dirname, 'dist'),
    8.      filename: 'main-webpack.js'
    9.  },
    10.  plugins: [new HtmlWebpackPlugin()],
    11.  devServer: {
    12.    contentBase: path.join(__dirname, "dist"),
    13.    compress: true,
    14.    open:true, //是否自动打开默认浏览器
    15.    port: 9000 // 端口号
    16.  }
    17. };

  5. 运行 webpack-dev-server

  6. 修改内容试试

    (七) resolve别名配置alias和文件后缀配置extensions

  7. 新建main.js, m1.js, webpack.config.js 代码

    1. // main.js
    2. // m1.js
    3. // webpack.config.js

(八) 跨域配置

对dev-server进行一下设置,详见vue-cli3配置跨域

  1. devServer: {
  2.   // 代理
  3.   proxy: {
  4.     // 只要请求地址有'api'都会匹配上
  5.     "/api": {
  6.       target: "http://127.0.0.1:3006",
  7.       ws: true,
  8.       // 允许跨域
  9.       changeOrigin: true,
  10.       pathRewrite: {
  11.         "^/api": "" //通过pathRewrite重写地址，将前缀/api转为/
  12.       }
  13.     }
  14.   }
  15. }

(九) 其他配置(了解)

  1. Babel-loader // es6转js5, 为了兼容低端浏览器
  2. Sass-loader // 类似less的预处理器
  3. PostCSS-loader // 后处理器
  4. img-loader // 加载图片的loader
  5. vue-loader
  6. ……其他loader

  7. ……其他插件

    (十) 其他前端构建打包工具

  8. grunt

  9. gulp
  10. fis
  11. rollup
  12. vite
  13. ……