（如转载，请注明出处）
开始构建webpack;
1. npm init (初始化npm)
键入命令后会提示输入名称, 版本，描述,入口，测试命令，git仓库，关键字，作者，许可，如下：
最后会生成一个叫packge.json的文件。
2. 安装webpack依赖
npm i -D webpack
(i --> install, -D --> dependency);
3. 安装全局webpack
npm i -g webpack
(g --> global);
3. 查看所有 webpack 版本
view webpack versions
查看最近版本
view webpack versions --json
4. 安装指定版本
npm i -D webpack@x.x.x
(x.x.x为指定版本号，比如2.2.0)
然后我们的webpack就安装完成了，接下来建立目录文件：
1. 项目目录下建立一个src文件夹和一个dist文件夹（与node-modules文件夹平级）；
其中src文件夹用来放项目文件，dist文件夹存放输出文件；
2.在编辑器内设置忽略文件
以vscode为例，按F1键打开搜索框，输入workspace settings打开设置,然后在搜索框内输入exclude找到忽略设置,将node_modules:true放入忽略设置内.
3. 在src 文件夹内建个测试文件(比如app.js),然后在文件内输入测试代码，比如console.log('Hello Wrold')。
4. 终端输入 webpack ./src/app.js ./dist/app.bundle.js测试打包代码，其中./src/app.js为项目开发文件，./dist/app.bundle.js为打包后输出文件；之后我们会发现在dist文件夹下生成了一个叫app.bundle.js文件。里面会找到下面一段代码：
(function(module, exports) {
console.log('Hello from app.js')
/***/ })
我们发现这段代码并未被压缩，如果想要输出压缩代码，我们需要在后面加-p，比如这样 webpack ./src/app.js ./dist/app.bundle.js -p, 之后我们发现app.bundle.js内的代码变成了这样： function(n,r){console.log("Hello from app.js")}；
如果我们需要watch(监听模式)，即开发代码更改后立即反映在输出代码中，我们需要在后面再加上--watch, 这样： webpack ./src/app.js ./dist/app.bundle.j -p --watch;
因为webpack有很多配置选择，我们需要在项目根目录下建立一个webpack.config.js文件，然后可以在文件内根据需要配置命令，比如上面我们在终端内输入的那一大段命令：webpack ./src/app.js ./dist/app.bundle.js -p watch, 可以在webpack.config.js中这样配置：
module.exports = {
entry: './src/app.js',
output: {
filename: './dist/app.bundle.js'
}
}；
然后在package.json中找到：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
改为：
"scripts": {
"dev”: "webpack -d --watch"
},
之后我们就可以将之前那一大段命令(webpack ./src/app.js ./dist/app.bundle.js -p --watch)精简为：npm run dev了；
npm run dev为开发者运行模式，有时我们还需要生产者运行模式，那么我们还需要在上面的 "scripts"里配置如下：
"scripts": {
"dev": "webpack -d --watch",
"prod": "webpack -p "
},
终端运行命令为： npm run prod
网友评论