NaN

webpack教程

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

  1. 为什么需要这些项目构建打包工具

  2. 项目构建打包工具有哪些

  3. webpack介绍

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

  4. 安装webpack和webpack-cli

npm i webpack@3 -g
npm i webpack-cli -g
webpack -v 检查是否安装成功

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

(1) 入口和出口概念

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

(2) 配置步骤

  1. 新建文件夹demo1
  2. 新建main.js,m1.js,m2.js
// 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'
}
  1. 运行webpack命令,打包成功会在本地创建一个dist文件夹,里面有一个main.js
  2. 给main.js添加hash值后缀, 每次文件与变动, hash值都发生改变
  output: {
        //a.文件名 [hash:7]会生成7个字符的hash值
        filename: 'main-[hash:7].js',
        //b.存放的路径
        path: path.resolve(__dirname, 'dist')
    },

(二) 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. 安装相关模块
npm init -y
npm i style-loader --save-dev
npm i css-loader --save-dev
  1. 新建main.js, main.css, webpack.config.js
// 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']
        }]
    }
}
  1. 运行打包命令 webpack
  2. 检验: 在dist(打包后生成的文件夹)文件夹内新建index.html,导入main.js,然后打开,看网页的背景颜色是否为灰色

(3) 配置less-loader

  1. 新建demo2.2文件夹
  2. 安装相关模块
npm init -y
npm i style-loader --save-dev 
npm i css-loader --save-dev 
npm i less-loader --save-dev  
npm i less --save-dev 

// 批量安装
npm i style-loader css-loader less-loader less --save-dev
  1. 新建main.js, main.less, webpack.config.js
// 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'
            ]
        }]
    }
}
  1. 检验:在dist文件夹新建index.html,导入main.js, 打开看看h3是否变了颜色

(三) plugins(插件)

(1) 插件是什么,有什么用

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

(2) 配置生成html的插件

例子1: 自动生成index.html文件

  1. 新建demo3.1文件夹
  2. 安装html-webpack-plugin
npm init -y
npm i html-webpack-plugin
  1. 新建main.js, webpack.config.js
// 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()
    ]
}
  1. 检查dist文件夹,并打开index.html文件查看

(四) vue2.x中的webpack配置

vue-cli底层使用的也是webpack, 查看vue的webpack配置命令 vue-cli3搭建项目用的也是webpack,不过配置文件在vue-cli2.x是可见的,3.x就隐藏起来了,需要查看vue-cli3的配置文件,可以使用vue-cli3创建一个新的项目,然后执行以下命令

  1. 进入到项目根目录,执行 vue inspect 就能查看webpack配置
  2. 输出配置文件
vue inspect > webpack.config.js

(五) resolve别名配置和文件后缀配置

  1. main.js 代码
import {add} from '@/cart'
add();
  1. /src/cart.js 代码
export const add = ()=> {
  let divEle = document.createElement('div');
  divEle.innerText = '我是购物车模块';
  document.body.appendChild(divEle);
}
  1. webpack.config.js 代码
// 导入nodejs的path
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // 入口配置
    entry: './main.js',
    // 出口配置
    output: {
        // 打包后的文件名称
        filename: 'bundle.js',
        // 配置打包后的路径,__dirname当前目录,
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development',
    plugins: [
      new htmlWebpackPlugin()
    ],
    resolve:{
      alias:{
        '@': path.resolve(__dirname,'src')
      },   
      // 省略后缀名
      extensions: [
       '.mjs',
       '.js',
       '.jsx',
       '.vue',
       '.json',
       '.wasm'
     ],
    }
}

(六) 跨域配置

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

devServer: {
  // 代理
  proxy: {
    // 只要请求地址有'api'都会匹配上
    "/api": {
      target: "http://127.0.0.1:3006",
      ws: true,
      // 允许跨域
      changeOrigin: true,
      pathRewrite: {
        "^/api": "" //通过pathRewrite重写地址，将前缀/api转为/
      }
    }
  }
}

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

  1. grunt
  2. gulp(流)
  3. fis
  4. rollup
  5. webpack(万物皆模块)
  6. vite(快)
  7. ......