Webpack学习笔记

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 '#