杂乱无章的 webpack 手记

本文纯属个人笔记，毫无指导倾向和价值！

什么是webpack

webpack 是模块打包器。
根据模块的关系进行静态分析，然后将模块按照指定的规则生成对应的静态资源。

---

安装 webpack

• 1 来到需要的位置：
  cd /User/willli/Site
• 2 新建一个项目，命名为 "webpack-study"：
  mkdir webpack-study
• 3 在项目中初始化 npm：
  npm init
• 4 在项目中安装 webpack ：
  npm install webpack --save-dev

---

基本配置

• 1 在项目根目录下，创建配置文件： webpack.config.js
• 2 先新建两个目录 src(用来存放脚本样式等) 和 dist(用来存放打包后的文件)
  mkdir src
mkdir dist
• 3 来到 src 目录下：
  cd src
  新建两个目录 script(用来存放脚本) 和 css(用来存放样式)
  mkdir script
mkdir css

---

测试一下

• 1 在 src/script 目录下 新建两个脚本文件 a.js 和 b.js，随便在里面写点什么👇

Paste_Image.png

• 2 在配置文件 webpack.config.js 中添加代码

module.exports = {
  // 希望被打包的文件
  entry: ['./src/script/a.js', './src/script/b.js'],
  output: {
    // 打包后的输出位置
    filename: './dist/bundle.js'
  }
}

• 3 在命令行中输入 webpack 运行。
• 4 如果在 dist 目录下看到打包好的 bundle.js 则证明安装和配置都已成功，可以在实际项目中正式操作了。

---

更接近现实的操作——webpack.config.js 和 主文件

通过配置文件，才更接近我们现实中开发的行为。

webpack 在执行时，除了命令行传入参数，还可以通过指定配置文件操作。
默认下，会搜索当前目录下的 webpack.config.js 文件，这是一个 node 模块，返回一个 json 格式的配置信息对象。

在 wepack.config.js 文件中添加我们的项目的依赖:

  "devDependencies": {
    "webpack": "^2.3.3",
    "css-loader": "^0.21.0",
    "style-loader": "^0.13.0"
  }

👆这里是添加了 css-loader 和 style-loader 的依赖（这是两个loader），它们是用来解释和引用 CSS 文件的。

使用插件

使用插件时候，要先引用它。
以一个可以自动生成 html 文件的插件为例👇

var HtmlwebpackPlugin = require('html-webpack-plugin');

然后在要实例化它👇

//  webpack.config.js

plugins: [
  new HtmlwebpackPlugin({
    title: 'demo',
    filename: 'index.html'
  })
]

👆这里生成了一个名为 index.html ，页面 title 为 demo 的 html 页面。

Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如 index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。

---

练手

这里有一个练手 demo 集合
我只完成到 demo09 ，因为后面让我联想不出实际应用场景，不知所以。
还有一个慕课网的视频教程 webpack深入与实战 是非常的好的非常适合新手起步的。

[完]