04_10.常用的webpack.config.js配置

• npm init -y
• npm i webpack -D
• npm i webpack -g
• npm i webpack -D
• npm i html-webpack-plugin -D
• npm i css-loader style-loader -D
• npm i less less-loader -D
• npm i node-sass sass-loader -D
• npm i html-loader -D
• npm i file-loader url-loader image-webpack-loader -D
• npm i babel-loader babel-core babel-plugin-transform-runtime babel-preset-latest -D
• npm i vue-loader vue-template-compiler -D
• npm i clean-webpack-plugin -D
• npm i webpack-dev-server -g
• npm i webpack-dev-server -D
• npm i optimize-css-assets-webpack-plugin -D

• webpack配置文件参考

// 因为webpack里面有些路径配置, 必须是绝对路径, 导入这个模块是为了调用方法计算路径
const path = require('path');  
const htmlWebapckPlugin = require('html-webpack-plugin');
const cleanWebpackPlugin = require('clean-webpack-plugin');

// 配置文件要求我们必须导出一个配置对象
module.exports = {

    // 入口
    entry: path.resolve(__dirname, './src/main.js'),

    // 输出
    output: {
        // 路径
        path: path.resolve(__dirname, './dist'),
        // 打包后js文件名
        filename: 'bundle_[chunkhash:8].js'
    },

    //  插件配置
    plugins: [

        // 压缩html, 自动注入打包好的js文件到body里
        new htmlWebapckPlugin({
            template: './src/index.html',   // 要处理的html
            filename: 'index.html',         // 处理后的html名称
            inject: 'body',                 // 自动注入js到什么地方
            minify:{ // 压缩优化HTML页面
                collapseWhitespace:true, // 合并空白字符
                removeComments:true, // 移除注释
                removeAttributeQuotes:true // 移除属性上的引号
            }
        }),

        // 每次打包前先清除dist目录
        new cleanWebpackPlugin(['./dist'])
    ],

    // loader的作用是为了让webpack可以打包其他类型的模块
    module: {

        // 配置loader, 该配置选项是必须的
        rules: [    
            
            // 打包css
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            },

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

            // 打包html模版
            {
                test: /\.(html|tpl)$/,
                use: [ 'html-loader' ]
            },

            // 打包url文件
            {
                test: /\.(png|jpg|gif|jpeg|svg)$/,
                use: [
                    // 默认配置全部打包进来
                    // 'url-loader'

                    // 指定小于10kb的图片才转为base64编码打包
                    {loader: 'url-loader', options: {limit: 10240}}
                ]
            },

            // 打包特殊语法编写的js文件
            {
                test: /\.js$/,
                use: ['babel-loader'],
                exclude: path.resolve(__dirname, './node_modules')  // 打包的时候,如果项目引入了node-modules的东西,不打包它
            }
        ]
    }
};