webpack教程

前端项目构建打包工具介绍
安装webpack和webpack-cli
(一) webpack配置-入口和出口
- (1) 入口和出口概念
- (2) 配置步骤
(二) loader配置
- (1) loader是什么
- (2) 配置css-loader
例子3: 配置生成全局变量的插件
(六) webpack-dev-server配置
(七) resolve别名配置alias和文件后缀配置extensions
(八) 跨域配置
(九) 其他配置(了解)
(十) 其他前端构建打包工具

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

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

安装webpack和webpack-cli

npm i webpack -g
npm i webpack-cli -g

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

(1) 入口和出口概念

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

(2) 配置步骤

新建文件夹demo1
新建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’ }


3. 运行webpack命令,打包成功会在本地创建一个dist文件夹,里面有一个main.js
3. 给main.js添加hash值后缀, 每次文件与变动, hash值都发生改变
```javascript
  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

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

安装相关模块

npm init -y
npm i style-loader --save-dev
npm i css-loader --save-dev

新建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’] }] } }


5. 运行打包命令 webpack
5. 检验: 在dist(打包后生成的文件夹)文件夹内新建index.html,导入main.js,然后打开,看网页的背景颜色是否为灰色
<a name="3d21790c"></a>
#### (3) 配置less-loader
1. 新建demo2.2文件夹
1. 安装相关模块
```javascript
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

新建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’ ] }] } }


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

新建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() ] }


4. 检查dist文件夹,并打开index.html文件查看
<a name="eXMMl"></a>
#### 例子2: 使用模板生成index.html文件
1. 新建demo3.2文件夹
1. 安装html-webpack-plugin
1. 新建main.js, webpack.config.js, tpl.html
```javascript
// main.js
console.log('今天的天气贼好');
// tpl.html
<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head> 
<body> 
    <div id="app">
        <ul>
            <li>xxx</li>
            <li>xxx</li>
            <li>xxx</li> 
        </ul>
    </div>
</body>
</html>
// 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({
            filename: 'index.html',
            template: './tpl.html'
        })
    ]
}

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

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

在main.js上添加以下代码

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

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

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

```javascript
npm i html-webpack-plugin webpack

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

(六) webpack-dev-server配置

安装相关模块

npm init -y
npm i webpack@4.46.0
npm i webpack-cli@3.3.12 
npm i html-webpack-plugin@4.5.2
npm i webpack-dev-server  // 本地全局都需要安装
npm i webpack-dev-server -g

main.js代码

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

webpack.config.js代码

const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
 mode: 'development',
 entry: './main.js',
 output: {
     path: path.resolve(__dirname, 'dist'),
     filename: 'main-webpack.js'
 },
 plugins: [new HtmlWebpackPlugin()],
 devServer: {
   contentBase: path.join(__dirname, "dist"),
   compress: true,
   open:true, //是否自动打开默认浏览器
   port: 9000 // 端口号
 }
};

运行 webpack-dev-server
修改内容试试

(七) resolve别名配置alias和文件后缀配置extensions
新建main.js, m1.js, webpack.config.js 代码
```
// main.js
// m1.js
// webpack.config.js
```

(八) 跨域配置

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

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

(九) 其他配置(了解)

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

(十) 其他前端构建打包工具
grunt
gulp
fis
rollup
vite
……