«

webpack配置

yang 发布于 阅读：348 JS高阶阶段

1. 加载器loader

webpack内核只能识别JS，不能识别其它文件，如：样式、图片、字体、html...，所以需要用到对应的加载器

1.1 css加载器

第一步：安装style-loader和css-loader

npm i style-loader@2.0.0 css-loader@5.0.1 -D

第二步：配置加载器

module: {
    rules: [
        //css加载器
        { test: /\.css$/i, use: ['style-loader', 'css-loader'] }
    ]
},

1.2 less加载器

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展

第一步：安装less-loader加载

npm i less-loader@7.1.0 less@3.12.2 -D

第二步：配置less加载器

{ test: /\.less$/i, use: ['style-loader', 'css-loader', 'less-loader'] }

1.3 图片加载器

第一步：安装url-loader 和 file-loader

npm i url-loader@4.1.1 file-loader@6.2.0 -D

第二步：配置图片加载器

//图片加载器
{
    test: /\.(jpg|png|gif)$/i,
    loader: 'url-loader',
    options: {
        limit: 8 * 1024, //8Kb以下打包成代码，8Kb以上打包成文件
        name: '[hash:8].[ext]', //设置打包后的文件名
        outputPath: 'imgs', //设置输出文件的路径
        esModule: false, //关闭ES6的模块化
    }
},

1.4 html加载器

第一步：安装html加载器

npm i html-loader@1.3.2 -D
npm i html-webpack-plugin@5.1.0 -D

第二步：配置html加载器

{ test: /\.html$/i, use: ['html-loader'] },

第三步：配置html插件

new HtmlWebpackPlugin({
    template: './src/index.html', //设置html文件的入口
}),

1.5 JS中的图片

JS中的图片需要先require()引入，后使用

let img1 = require('../images/01.jpg');
document.querySelector('#mypic').addEventListener('click', function () {
    this.src = img1;
});

1.6 字体图标加载器

字体图标文件要用到 file-loader 之间已经安装过了，直接使用即可

配置字体图标加载器：

{
    test: /\.(ttf|woff|woff2|eot|svg)$/i,
    loader: 'file-loader',
    options: {
         name: '[hash:16].[ext]',
         outputPath: 'fonts',
         esModule: false,
    }
}

2. 插件plugins

2.1 css提取插件

第一步：安装插件模块

npm i mini-css-extract-plugin@2.4.2 -D

第二步：引入插件

const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //引入css提取插件

第三步：配置插件参数

new MiniCssExtractPlugin({
    filename: 'css/[name].css',
}),

第四步：将css加载器和less加载器中的 style-loader 改成插件自带的加载器

{
    test: /\.css$/i, use: [{
        loader: MiniCssExtractPlugin.loader,
        options: {
            publicPath: '../'
        }
    }, 'css-loader']
},

2.2 压缩css的插件

第一步：安装插件

npm i optimize-css-assets-webpack-plugin@6.0.1 -D
//npm不行，用yarn
yarn add optimize-css-assets-webpack-plugin@6.0.1 -D

第二步：引入配置

new OptimizeCssAssetsWebpackPlugin(),

3. 开发服务器

3.1 使用开发服务器

第一步：安装开发服务器模块

npm i webpack-dev-server@3.11.2 -D
//npm不行，换yarn
yarn add webpack-dev-server@3.11.2 -D

第二步：配置开发服务器参数

devServer: {
    contentBase: __dirname+'/dist', // 启动服务器目录
    compress: true, // 启动gzip
    port: 8080,  // 端口
    open: true, // 自动打开服务
    publicPath: '/', // 静态资源查找路径
    openPage: 'index.html', // 打开的页面
},

3.2 开发环境和生产环境

第一步：安装环境模块

npm i cross-env@7.0.3 -D
//npm不行，换yarn
yarn add cross-env@7.0.3 -D

第二步：修改package.json，根据不同的命令设置不同的环境模式

 "scripts": {
    "build": "cross-env NODE_ENV=production webpack",
    "serve": "cross-env NODE_ENV=development webpack serve"
  },

第三步：修改webpack.config.js的mode选项

mode: process.env.NODE_ENV,

具体页面配置如下 (webpack.config.js):

//引入各种插件
const HtmlWebpackPlugin = require('html-webpack-plugin'); //引入html插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //引入css提取插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); //压缩css的插件

//根据页面数自动生成js入口和html入口
const glob = require('glob');
let js = glob.sync('./src/pages/*/*.js');
let entryObj = {};
js.forEach(v => {
    let fn = v.split('/').pop().replace('.js', '');
    entryObj[fn] = v;
});

let html = glob.sync('./src/pages/*/*.html');
let htmlArr = [];
html.forEach(v => {
    let filename = v.split('/').pop();
    let name = filename.replace('.html', '');
    htmlArr.push(
        new HtmlWebpackPlugin({
            template: v, //设置html文件的入口
            filename: filename, //设置出口
            chunks: [name], //设置html中加载哪些模块
        })
    );
});

//webpack的配置文件
module.exports = {
    //多入口
    entry: entryObj,

    //多出口
    output: {
        filename: 'js/[name].js',
        path: __dirname + '/dist',
        publicPath: './', //公共资源路径
    },

    //加载器
    module: {
        rules: [
            //css加载器
            {
                test: /\.css$/i, use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                }, 'css-loader']
            },

            //less加载器
            {
                test: /\.less$/i, use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                }, 'css-loader', 'less-loader']
            },

            //图片加载器
            {
                test: /\.(jpg|png|gif)$/i,
                loader: 'url-loader',
                options: {
                    limit: 8 * 1024, //8Kb以下打包成代码，8Kb以上打包成文件
                    name: '[hash:8].[ext]', //设置打包后的文件名
                    outputPath: 'imgs', //设置输出文件的路径
                    esModule: false, //关闭ES6的模块化
                }
            },

            //html加载器
            { test: /\.html$/i, use: ['html-loader'] },

            //字体图标加载器
            {
                test: /\.(ttf|woff|woff2|eot|svg)$/i,
                loader: 'file-loader',
                options: {
                    name: '[hash:16].[ext]',
                    outputPath: 'fonts',
                    esModule: false,
                }
            }
        ]
    },

    //插件
    plugins: [
        //html插件
        ...htmlArr,

        //提取css插件
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
        }),

        //压缩css插件
        new OptimizeCssAssetsWebpackPlugin(),
    ],

    //模式 development开发模式，production生产模式
    mode: process.env.NODE_ENV,

    //开发服务器
    devServer: {
        contentBase: __dirname + '/dist', // 启动服务器目录
        compress: true, // 启动gzip
        port: 8080, // 端口
        open: true, // 自动打开服务
        publicPath: '/', // 静态资源查找路径
        openPage: 'index.html', // 打开的页面
    },
}

package.json文件配置:

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack",
    "serve": "cross-env NODE_ENV=development webpack serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "cross-env": "7.0.3",
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^5.1.0",
    "less": "^3.12.2",
    "less-loader": "^7.1.0",
    "mini-css-extract-plugin": "^2.4.2",
    "optimize-css-assets-webpack-plugin": "6.0.1",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.12.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "3.11.2"
  }
}

使用步棸:

1. 项目环境搭建

1.1 创建远程仓库

在 gitee.com 去创建

注意添加.gitignore，用于设置git忽略列表（不纳入版本控制）

1.2 克隆到本地

git clone 仓库地址

1.3 将配置好的webpack配置文件复制过去

package.json

webpack.config.js

1.4 安装依赖

yarn  或者  npm i

1.5 创建src开发目录

src/assets 公共资源

src/libs 第三方库

src/pages 页面目录，一个页面就是一个文件夹，里面有3个文件

src/utils 自己封装的工具包

1.6 运行项目

yarn serve
npm run serve

1.7 打包上线

yarn build
npm run build

版权所有：微4e
文章标题：webpack配置
除非注明，文章均为 微4e 原创，请勿用于任何商业用途，禁止转载

推荐阅读：

扫描二维码，在手机上阅读
请先 登录 再评论