项目自动化构建工具 - webpack4.0

一、安装

由于webpack4.0以后，webpack-cli被分离出来了，所以需要全局安装webpack-cli

npm install webpack-cli -g

局部安装

npm install webpack --save-dev

二、使用方式

webpack3.0的传统终端打包方式：

webpack ./entry.js ./dist/bundle.js

但是在4.0以后会发出警告，如下：

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

意思是需要指定开发模式，有 production 和 developement 两种。没有指定时默认使用生产模式：

webpack --mode development index.js bundle.js

此时已经回归正常，不报错了。

也可以通过配置文件进行配置，就不需要终端指定开发模式

/* webpack.config.js */



module.exports = {
    entry: './entry.js',                 // 入口文件路径
    output: {
        filename: './dist/js/bundle.js',   // 打包输出地址
        path: __dirname                    // 指定当前目录
    },
    mode: 'development'    // production 或者 development
};

webpack ./entry.js ./dist/bundle.js

三、配置loader示例 (配置方式跟4.0以前有所改变)

/* webpack.config.js */


module.exports = {
    entry: './entry.js',                 // 入口文件路径
    output: {
        filename: './dist/js/bundle.js',   // 打包输出地址
        path: __dirname                    // 指定当前目录
    },
    module: {                              // 引入的模块
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    // 'file-loader',
                    'url-loader'
                ]
            }
        ]
    }
};

四、打包多个入口文件

还可以在配置中指定多个入口文件，分别给多个文件生成新的打包文件。

/* webpack.config.js */



module.exports = {
    entry: {
        one:'./entry.js',                 // 入口文件1
        two:'./entry2.js',                 // 入口文件2
        three:'./entry3.js',                 // 入口文件3
    }
    output: {
        filename: './dist/js/[name].bundle.js',   // 打包输出地址,加上入口文件指定的命名，如one.entry.js  two.entry.js
        path: __dirname                    // 指定当前目录
    },
    mode: 'development'    // production 或者 development
};