项目自动化构建工具 - 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
};

 

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值