首页 综合技术 WebPack

# 前言

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

# 概念

entry: 入口，指定的打包从这个文件开始，寻找依赖。
output: 出口，最终打包输出到哪里去
loader: webpack 默认只能打包 JS 文件，loader 可以转换为能够被 webpack 打包的文件
plugins： 插件，很多高级功能，都需要使用插件完成
mode: 模式，默认 development ，开发模式 / 生产模式

# 安装步骤

全局安装 webpack 和 webpack-cli

yarn global add webpack webpack-cli

创建本地项目

yarn init

本地安装

yarn add webpack webpack-cli -D
webpack -v

# 加载器使用步骤

配置（推荐）：在 webpack.config.js 文件中指定 loader

# 加载 JS 文件

初始化 package.json

yarn init -y

新建文件结构

demo
├── webpack.config.js
├── src
│   ├── css
│   ├── js
│   │   ├── index.js
│   │   └── show.js
└── package.json

在 show.js 中写入

exports.show = function show() {
    return '你是真的秀'
}

在 index.js 中写入

let show = require('./show.js')
console.log(show.show());

在 webpack.config.js 中写入

// 引入 path 内置模块
const path = require('path')
module.exports = {
	// 需要被打包的 js 文件路径及文件名
    entry: './src/js/index',
    output: {
    	// 输出目标文件的绝对路径（__dirname 为当前目录的绝对路径）
    	// path: __dirname + '/dist',
        path: path.resolve(__dirname, 'dist'),
        // 输出的文件名及相对于 dist 目录的相对路径
        filename: 'bundle.js'
    },
    // 开发模式
    mode: 'development'
}

开始打包

npx webpack

新建 src/index.html 运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 class="title">我可真是太帅了</h1>
    <script src="../dist/bundle.js"></script>
</body>
</html>
# 加载 CSS 文件
在 index.index 中添加
<body>
    <h1 class="title">现在我表示很痛苦，直接痛苦面具咩</h1>
    <ul class="nav">
        <li>首页</li>
        <li>文章</li>
        <li>关于</li>
    </ul>
    <div class="iconImg01"></div>
    <div class="iconImg02"></div>
    <span class="iconfont icon-ziliaoxiazai"></span>
    <img src="./image/1.jpg">
    <img src="./image/2.jpg">
    <script src="../dist/bundle.js"></script>
</body>
在 src/css 下新建 index.css
.title {
    background: green;
    color: red;
}
下载加载器
yarn add css-loader style-loader -D
记得在 index.js 引入哦
require('../css/index.css')
配置 loader
//use 数组中从右到左解析 css 通过 style 标签插入到网页中
module.exports = {
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
        }]
    }
}
# 加载 Less 文件
在 src/css 下新建 index.less
.container {
    width: 90%;
    margin-left: 5%;
}
.nav {
    .container;
    display: flex;
    background: skyblue;
    >li{
        text-align: center;
        margin: 0 30px;
        height: 45px;
        line-height: 45px;
        list-style: none;
        &:hover{
            background: pink;
        }
    }
}
下载加载器
yarn add less-loader less -D
记得在 index.js 引入哦
require('../css/index.less')
配置 loader
rules: [{
    test: /\.less$/,
    use: ['style-loader', 'css-loader', 'less-loader'],
}]
# 自动打包
为了稳定性，可以解除下面注释
添加 watch: true
const path = require('path')
module.exports = {
    // 目标是浏览器
    // target: "web",
    entry: './src/js/index.js',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js',
        // 所有资源的基础路径，静态资源最终访问路径
        // publicPath: "./", 
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
        }, {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader'],
        }]
    },
    watch: true,
    mode: "development",
};
添加 package.json 等同于修改 package.json
"scripts": {
    "go": "webpack --watch"
}
# 加载 Less 或 CSS 文件中的背景图
在 src/image 下准备好大小合适的图片
在 index.less 中添加
.iconImg01{
    width: 100px;
    height: 100px;
    background: url("../image/1.jpg") no-repeat;
    background-size: 100% 100%;
}
.iconImg02{
    width: 200px;
    height: 200px;
    background: url("../image/2.jpg") no-repeat;
    background-size: 100% 100%;
}
下载加载器
yarn add url-loader file-loader -D
配置 loader
// 自定义配置则使用 loader 处理下面格式文件
// 自定义配置输出图片名字，限制 10kb，输出在 image 目录下
// 限制大小 大图片单独输出不打包，小图片经过 base64 转码直接打包
rules: [{
        test: /\.(png|jpg|jpeg|gif)$/,
        loader: 'url-loader',
        options: {
            name: '[hash].[ext]',
            limit: 10 * 1024,
            outputPath: 'image'
        }
    }]
# 加载 iconfont 字体图标
新建 src/lib/font 文件夹，准备好字体图标
加载背景图，已经下载过了
yarn add file-loader -D
记得在 index.js 引入哦
require('../lib/font/iconfont.css')
配置 loader
rules: [{
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    loader: 'file-loader',
    options: {
        name: '[hash:10].[ext]',
        outputPath: 'fonts'
    }
}]
# ES6 转 ES5
在 index.js 中添加
const sum = (num1, num2) => num1 + num2;
指定版本，以下版本不兼容
yarn add babel-core babel-loader@7.1.5 babel-preset-es2015 -D
配置 loader
rules: [{
    test: /\.js$/,
    use: ['babel-loader'], // 处理这个格式的文件 需要使用哪些 loader
    exclude: /node_modules/, // 排除
}]
查看 bundle.js
var sum = function sum(num1, num2) {\n  return num1 + num2;\n};
根目录下新建 .babelrc
{
    "presets": [
      "es2015"
    ]
  }
# 插件使用步骤
下载插件
yarn add 插件名 -D
引入插件
const 变量名 = require('插件名')
new 插件，在里面写配置
plugins: [
    new 变量名({
        key: val  // 写配置
    })
]
# 提取 html & img
之前手动创建 index.html ，实际上 webpack 可以自动帮助我们完成
除了 HTML 本身，其他资源如 CSS、JS，图片等均无需手动添加
也就是说修改 index.html 模板文件
<script src="../dist/bundle.js"></script>
下载插件
yarn add html-loader  html-webpack-plugin@next -D
填写插件配置
// 引入插件，配置 loader 和 插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    module: {
        rules: [{
            test: /\.(png|jpg|jpeg|gif)$/,
            loader: 'url-loader',
            options: {
                name: '[hash].[ext]',
                limit: 10 * 1024,
                outputPath: 'image'
            }
        }, {
            test: /\.html$/,
            use: ['html-loader'], 
        }, ]
    },
    plugins: [
        new HtmlWebpackPlugin({
        	// 以哪个 html 为模板
            template: './src/index.html', 
             // 输出的文件名
            filename: 'home.html'
        })
    ],
	watch: true,
    mode: "development",
}
# 提取 CSS 文件
下载插件
yarn add mini-css-extract-plugin -D
我们需要提取 CSS 文件 放到打包目录中，填写插件配置
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  plugins: [
    new HtmlWebpackPlugin({
        // 注意括号
    }), new MiniCssExtractPlugin({
        filename: "./src/index.css",
    }),
]
这时候还是无法提取独立的 CSS 文件
前面加载 CSS 或 Less 文件使用 style-loader，我们需要做修改
module: {
    rules: [{
        test: /\.css$/,
        use: [{
            loader: MiniCssExtractPlugin.loader,
            options: {
                publicPath: '../'
            }
        }, 'css-loader'],
    }, {
        test: /\.less$/,
        use: [{
            loader: MiniCssExtractPlugin.loader,
            options: {
                publicPath: '../'
            }
        }, 'css-loader', 'less-loader'],
    }]
}
# 压缩 CSS 文件
下载插件
yarn add optimize-css-assets-webpack-plugin -D
填写插件配置
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin') 
plugins: [
    new HtmlWebpackPlugin({
        // 注意括号
    }), new MiniCssExtractPlugin({
        filename: "./src/index.css",
    }),new OptimizeCssAssetsWebpackPlugin()
]
# 删除 dist 文件夹
下载插件
yarn add  clean-webpack-plugin -D
填写插件配置
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
plugins: [
new CleanWebpackPlugin()
]
# 启动开发服务器
全局安装 & 本地安装
yarn global add webpack-dev-server
yarn add webpack-dev-server -D
配置开发服务器
devServer: {
    contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
    compress: true, // 启动 gzip
    port: 666,  // 端口
    open: true // 自动打开服务
    openPage: 'home.html',
    publicPath: "/",
},
修改 package.json
"scripts": {
    "serve": "webpack serve",
    "build": "webpack --progress"
  },
使用命令
// 启动开发服务器  
yarn serve
// 显示进度条
yarn build
# 配置多个文件
需要修改 入口、出口、插件
记得在 JS 文件引入 CSS 文件哦
│  .babelrc
│  package.json
│  webpack.config.js
│  
└─src
    ├─css
    │  │  home.less
    │  │  login.less
    │  │  reg.less
    │  │  
    │  └─common
    │          basic.css
    │          reset.css
    │          
    ├─image
    │      1.jpg
    │      2.jpg
    │      
    ├─js
    │  │  home.js
    │  │  login.js
    │  │  reg.js
    │  │  
    │  └─common
    │          commonCss.js
    │          fn.js
    │          myAjax.js
    │          
    ├─lib
    └─page
            home.html
            login.html
            reg.html
webpack.config.js 配置
entry: {
    commonCss: './src/js/common/commonCss.js',
    myAjax: './src/js/common/myAjax.js',
    fn: './src/js/common/fn.js',
    home: './src/js/home.js',
    login: './src/js/login.js',
    reg: './src/js/reg.js',
},
output: {
    path: __dirname + '/dist',
    filename: 'js/[name]-[hash:5].js',
},
plugins: [
    new HtmlWebpackPlugin({
        template: './src/page/home.html',
        filename: 'home.html',
        chunks: ['home', 'commonCss', 'fn']
    }), new HtmlWebpackPlugin({
        template: './src/page/reg.html',
        filename: 'reg.html',
        chunks: ['reg', 'commonCss', 'myAjax', 'fn']
    }), new HtmlWebpackPlugin({
        template: './src/page/login.html',
        filename: 'login.html',
        chunks: ['login', 'commonCss', 'myAjax', 'fn']
    }), new MiniCssExtractPlugin({
        filename: "css/[name]-[hash:5].css",
    }), new OptimizeCssAssetsWebpackPlugin()
],
 更新于   阅读次数  次
请我喝[茶]~(￣▽￣)~*
山河 微信支付
微信支付
山河 支付宝
支付宝
山河 贝宝
贝宝