一、在本地安装webpack
安装的前提是安装了Node.js,使用 Node.js 最新的长期支持版本(LTS - Long Term Support),是理想的起步。使用旧版本,你可能遇到各种问题,因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。
对于大多数项目,我们建议本地安装。
npm i --save-dev webpack
npm i --save-dev webpack@<version>
不推荐全局安装,因为会将webpack锁定到指定版本,在使用不同版本的项目中,可能会导致构建失败。
es6的import和export已经标准化,但大多数浏览器还部支持,但webpack却能够提供开箱即用般的支持。
二、创建配置文件
在项目根目录下创建webpack.config.js
配置文件:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname,'dist')
}
}
比起 CLI 这种简单直接的使用方式,配置文件具有更多的灵活性。配置文档
三、NPM 脚本
在项目的package.json里加入如下代码:
"scripts": {
"build": "webpack"
},
注意,使用npm的scripts
,我们可以通过模块名引用本地安装的npm包
四、执行打包
在cmd里切到项目目录,运行:
npm run build
运行成功后如图:
如果不使用npm脚本,可以直接运行./node_modules/.bin/webpack
进行打包,不过在windows里可能会遇到以下问题:
解决方法是为/
换个方向:
如果 webpack.config.js 存在,则 webpack 命令将默认选择使用它。这里使用--config
只是表明,可以传递任何名称的配置文件,这对需要拆分成多个文件的复杂配置
非常有用。