1 安装工程
- 1.1 创建工程 webpack-demo 文件夹
- 1.2 进入工程目录，使用默认配置进行初始化生成 package.json 文件
cd webpack-demo
npm init -y
// Terminal 终端输出
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
- 1.3 安装 webpack
npm install --save webpack
// --save 会将 *生产模式* 的依赖写入 package.json 文件
"dependencies": {
"webpack": "^3.5.5"
}
npm install --save-dev path
// --save-dev 会将 *开发模式* 的依赖写入 package.json 文件
"devDependencies": {
"path": "^0.12.7"
}
// npm install 直接安装依赖，不写入 package.json 文件
1.4 创建一个 bundle 文件
创建 app 文件夹，存放用于书写和编辑的代码
创建 public 文件夹，存放构建过程产生的代码最小化和优化后的“输出”目录，最终将在浏览器中加载1.5 使用 bundle 文件
项目结构图
// Terminal 中断输入命令行
./node_module/.bin/webpack ./app/index.js ./public/bundle.js
2 通过配置文件使用 Webpack
.\node_modules.bin\webpack
自动引用 webpack.config.js 文件中的配置选项
module.exports = {
entry: __dirname + '/app/index.js',
output: {
path: __dirname + '/public',
filename: 'bundle.js'
}
}
__dirname: 总是返回被执行的 js 所在文件夹的绝对路径
__filename: 总是返回被执行的 js 的绝对路径
process.cwd(): 总是返回运行 node 命令时所在的文件夹的绝对路径
插件（Plugins）
插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
Webpack 有很多内置插件，同时也有很多第三方插件
html-webpack-plugin
HMR (Hot Module Replacement)
TODO
开发中 Server (DevServer)
动态打包 (dynamically bundle)
可能出现的报错
Cannot assign to read only property 'exports' of object '#<Object>'
原因是：The code above is ok. You can mix require and export. You can't mix import and module.exports.
在webpack打包的时候，可以在js文件中混用require和export。但是不能混用import 以及module.exports
比如混用 import _ from 'lodash' 和 module.exports，这种写法会报错。可以使用 var _ = require('lodash') 和 module.exports
