webpack的简单配置

环境

"autoprefixer": "^9.7.3",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.4.0",
"file-loader": "^5.0.2",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"mini-css-extract-plugin": "^0.9.0",
"postcss-loader": "^3.0.0",
"style-loader": "^1.1.2",
"url-loader": "^3.0.0",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"

一、局部安装

npm install webpack webpack-cli -D

提示: 版本更新太快, 建议局部安装.

二、检查是否安装成功

webpack -v // 全局安装查看
npx webpack -v // 局部安装查看
./node_modules/.bin/webpack -v // 局部安装查看
npm info webpack // 查看 webpack 版本信息

npx webpack // 打包命令
npx webpack --config webpack.test.js // 指定配置文件

默认的入口文件是 src/index.js 输出文件是 dist/main.js 默认认识 js、json 格式, 其他的需要通过 loader 进行配置

三、 webpack 的核心配置

1. entry 入口文件

entry: './src/index.js',
entry: { // 单文件
    main: './src/index.js'
}
entry: { // 多入口文件
    main: './src/index.js',
    login: './src/login.js'
},

2. output 出口文件

// output: './dist', // 输出文件
output: { // 输出文件
        path: path.resolve(__dirname, 'dist'),
        // filename: 'main.js'
        filename: '[name]_[chunkhash:8].js' 
        // 使用占位符 entry 中需要使用对象的形式设置
        // chunkhash 的作用 如果 index 中的内容改变,那么 index 中 chunkhash 会发生变化
        // 而其他没改变的文件打包名称不会改变,还可以使用浏览器的缓存
        // js 模块用 chunkhash
    },

3. loader 模块解析.

file-loader
url-loader
style-loader
css-loader
less-loader
postcss-loader   autoprefixer // css添加前缀

4. plugins 运行到某个阶段的时候,帮你做一些事情, 类似于生命周期的概念

html-webpack-plugin // 自动生成 dist/index.html
clean-webpack-plugin // 清除 dist 目录
mini-css-extract-plugin // css 独立出来

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    mode: 'development', // 环境设置 development或者生产 production
    // entry: './src/index.js', // 入口文件
    entry: { // 多入口文件
        main: './src/index.js',
        login: './src/login.js'
    },
    // output: './dist', // 输出文件
    output: { // 输出文件
        path: path.resolve(__dirname, 'dist'),
        // filename: 'main.js'
        filename: '[name]_[chunkhash:8].js' // 使用占位符 entry 中需要使用对象的形式设置 name
    },
    module: {
        rules: [
            // loader 模块配置
            {
                test: /\.(jpe?g|png|gif)$/,
                // use: 'file-loader'
                use: {
                    loader: 'url-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'image/',
                        limit: 2048, // 小于 2048 字节 会转成 base64 放在 js 中
                    }
                }
            },
            {
                test: /\.(woff2)$/,
                // use: 'file-loader'
                use: {
                    loader: 'file-loader'
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'] // 从右到左
            },
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader', {
                    loader: 'postcss-loader',
                    options: {
                        plugins: () => [
                            require('autoprefixer')({
                                overrideBrowserslist: ['last 2 versions', '>1%']
                            })
                        ]
                    }
                }] // 从右到左
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: '首页',
            template: './src/index.html', // 指定模板
            inject: true, // js 文件放入的位置 true head body false
            chunks: ['index'],
            filename: 'index.html'
        }),
        new HtmlWebpackPlugin({
            title: '注册',
            template: './src/index.html', // 指定模板
            inject: true, // js 文件放入的位置 true head body false
            chunks: ['login'],
            filename: 'login.html'
        }),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: "[name]_[contenthash:8].css"
        })
    ] // 插件配置
    // watch: true, // 开启观察者模式
    // watchOptions: {
    //     // 默认为空, 不监听的文件或者目录, 支持正则
    //     ignored: /node_modules/,
    //     // 监听到文件变化后,等 300ms 再去执行,默认 300ms
    //     aggregateTimeout: 300,
    //     // 判断文件是否发生变化是通过不停的询问系统指定文件的有没有变化,默认每秒 1000 次
    //     poll: 1000
    // }
}

如需开发和生产环境分开配置请点击查看下一篇: webpack 开发环境和生产环境的配置