webpack配置--基础篇_🤔就是我的专栏文章_微信文章

webpack是一个模块打包工具,能够递归构建一个js模块的依赖关系,将模块最终打包成一个或多个文件.

安装

yarn add webpack webpack-cli
复制代码

零配置

webpack可以进行零配置,只是此时打包功能比较弱.执行:

npx webpack
复制代码

进行打包. 执行npx webpack默认查找node_modules---bin文件夹--webpack.cmd--执行../webpack/bin/webpack.js

手动配置

简单配置

let path = require('path');
module.exports = {
    mode: 'development', //模式:打包后的文件是否可见production/development
    entry: './src/index.js', // 入口,可以是相对路径
    output: { // 出口
        filename: 'bundle.[hash:8].js', // 打包后的文件名:+哈希(打包生成新的文件), :8指定哈希长度
        path: path.join(__dirname, 'build'), // 打包后的文件路径:必须是绝对路径
    }
};

复制代码

默认配置文件名为webapck.config.js

webpack-cli文件夹下的config-yarg.js文件指定,配置文件名为webpack.config.js 或 webpackfile.js

修改配置文件名

方法一:

npx webpack --config webpack.config.name.js
复制代码

方法二: 在package.json文件中配置脚本进行打包, 同时修改配置文件名

"scripts": {
    "build": "webpack --config webpack.config.my.js"
 }
 // 执行 npm run webpack进行打包
复制代码

当仅在package.json文件中配置脚本进行打包, 在执行命令中修改配置文件名时:

"scripts": {
    "build": "webpack"
 }
// 执行npm run build --  --config webpack.config.my.js 打包,注意两个--进行传参
复制代码

html插件

启动静态服务-webpack-dev-server

webpack-dev-server:启动了一个使用express的Http服务器

// webpack.config.js文件
devServer: { // 开发服务器配置,实现静态服务
    port: 3000, // 服务器启动端口
    progress: true, // 打包进度条
    contentBase: path.join(__dirname, './build'), // 指定静态服务目录
    compress: true, // 是否压缩
}

// package.json文件
"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
}
 
// 执行npm run dev运行静态服务,通过http://localhost:3000在浏览器中访问
复制代码

html-webpack-plugin

html-webpack-plugin:将打包后的js文件放在html中,将结果放在build目录下

// webpack.config.js文件
let HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html', // html模板文件
        filename: 'index.html', // 打包后的文件名称
        hash: true, // 添加哈希,避免缓存
        minify: { // 对html也进行压缩
            removeAttributeQuotes: true, // 删除双引号
            collapseWhitespace: true, // 折叠为一行
        }
    }),
],
复制代码