webpack 配置

Posted 2021-03-07 一城柳絮吹成雪

const path = require(‘path‘); // 首先要引入node.js中path 模块，用于处理文件与目录的路径
// const 命令声明一个只读的常量，一旦声明，值不可以改变，改变会报错；只声明不赋值也会报错
// 常量存储的是一个不可以变化的变量。

// 引入html-webpack-plugin 插件
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);

const webpack = require(‘webpack‘);

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: ‘./src/./js/main.js‘, // 指定入口文件
    output: {
        path: path.resolve(__dirname, ‘dist‘), // 指定出口文件的路径目录
        // filename: ‘bulid.js‘ // 制定出口文件的名称
        // path指定了本地构建地址，publicPath指定在浏览器中所引用的,指定的是构建后在html里的路径
        // publicPath: ‘./‘,
        // 将入口文件重命名为带有20位的hash值的唯一文件
        filename: ‘[name].[hash].js‘ 
    },
    module: {
        rules: [
            // 在webpack2中，loaders 被替换成了 rules 其实就是loader的规则
            //  实现 css 打包
            /*{
                test: /.css$/,
                use: [‘style-loader‘, ‘css-loader‘]
                    // test 说明了当前 loader 能处理那些类型的文件
                    // use 则指定了 loader 的类型。
                    // 注意：数组中的loader不能省略扩展名
            },*/
            // 实现 scss 打包
            {
                test: /.scss$/,
                // 注意 是sass-loader ，不是 scss-loader
                use: [‘style-loader‘, ‘css-loader‘, ‘sass-loader‘]
            },
            // 实现 less 打包
            {
                test: /.less$/,
                use: [‘style-loader‘, ‘css-loader‘, ‘less-loader‘]
            },
            // 实现 url 资源打包
            {
                // 图片文件使用 url-loader 来处理
                test: /.(png|jpg|gif|ttf)$/,
                use: [{
                    loader: ‘url-loader‘,
                    // options 为可以配置的选项
                    options: {
                        limit: 8192
                            // limit=8192表示将所有小于8kb的图片都转为base64形式
                            // （其实应该说超过8kb的才使用 url-loader 来映射到文件，否则转为data url形式）
                    }
                }]
               //保证输出的图片名称与之前命名的图片名称保持一致(目前只是支持这样的写法，                   webpack3 没有响应的options进行配置)
                // use:‘url-loader?limit=8192&name=imgs/[name].[ext]‘ 
            },
            // 实现 ES6转 ES5
            {
                test: /.js$/,
                exclude: /(node_modules)/, // exclude 排除的意思，把 node_modules文件夹排除编译之外
                use: {
                    loader: ‘babel-loader‘,
                    options: {
                        // presets 预设列表（一组插件）加载和使用
                        presets: [‘env‘],
                        plugins: [‘transform-runtime‘] // 加载和使用的插件列表
                    }
                }
            },
            // 提取 css模块（如果使用这个模块的话，需要把之前的CSS打包模块注释掉，不然会重复）
            {
                test: /.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            }

        ]
    },
    devServer: {
        // contentBase: ‘./dist‘, // 在 localhost:8080(默认) 下建立服务，将 dist 目录下的文件，作为可访问文件  contentBase：告诉服务器从哪里提供内容
        // 或者通过以下方式配置
        contentBase: path.join(__dirname, "dist"),
        port: 9000, // 如果想要改端口，可以通过 port更改
        hot: true, // 启用 webpack 的模块热替换特性()
        inline: true, // 实现实时重载（实现自动刷新功能）默认情况下是 true。
        host: "localhost" // 如果你希望服务器外部可访问，指定使用一个 host。默认是 localhost(也就是你可以不写这个host这个配置属性)。
    },
    plugins: [
        // 从 bundle 中提取文本（CSS）到单独的文件      
        new ExtractTextPlugin({
            //  提取css，并重名为带有 20位的hash值的唯一文件
            filename: ‘[name].[hash].css‘,
            // 将所有的独立文件模块（这里指的是css文件）合并成一个文件
            allChunks: true
        }),
        new HtmlWebpackPlugin({
            title: ‘首页‘, // 用于生成的HTML文档的标题
            filename: ‘index.html‘, //写入HTML的文件。默认为index.html。也可以指定一个子目录（例如：）assets/admin.html
            template: ‘index.html‘ // Webpack需要模板的路径
                // template: ‘index.ejs‘ // Webpack需要模板的路径
        }),
        // 需要结合webpack-dev-server 启用热替换模块(Hot Module Replacement)，也被称为 HMR
        new webpack.HotModuleReplacementPlugin()
    ]
}