我的WebPack入门（一）

WebPack已经火了好久，几乎已经成为一个前端的必备技能，先翻译官网两句话。

WebPack是一个灵活的、可扩展的、公平的、可用于生产环境的、开源的模块打包器。

WebPack V1版本已经过时，请开发者们升级到V2。

这篇笔记是基于WebPack V2.2.1 开始。

安装（Installation）

npm install webpack -g 全局安装webpack，这样可以在全局使用webpack命令；

新建webpack文件夹，Terminal/cmd切换到webpack文件夹下，执行npm init -y生成package.json文件
-y: init过程中会有一堆繁琐的问题，比如包名、作者、描述、依赖等一些东西，通过-y命令可以直接跳过，默认全部“是”。
PS：因为这里我的文件夹名字起的叫webpack，所以默认生成的package.json中的name就是webpack，而webpack是关键字会导致err，只需要打开package.json把name随便改一下即可。

npm install webpack --save-dev 如果想要安装特定版本的webpack可以使用 npm install webpack@ --save-dev，将version换成想要的版本号即可。
- --save：save 的意思是把安装信息保存到 package.json中，打开package.json会发现多了devDependencies项已经把webpack添加进去了："devDependencies": {"webpack": "^2.2.1"}；
- -dev：dev的意思是当前安装插件是放在"devDependencies"中，表示是开发时所需依赖，正式生产环境所需依赖不需要添加-dev，是会放在"Dependencies"中

开始（Getting Started）

首先建好文件目录
- webpack.config.js：类似gulpfile.js，配置相关设置，我觉得放在根目录下会合适一些，在配置path时会方便一些，执行webpack命令时会默认搜索webpack.config.js文件，也可以通过指定 &＃8211;config指定其他文件为配置文件
- app：存放项目文件模块
  - PS：在模块化开发中，这种文件目录是不推荐的，需要依模块来划分文件目录
- dist：存放webpack处理后的文件

新建JS/css文件
- hello.js

const msg = "Hello "; export default class Hello { constructor() { this.say = this.say.bind(this); } say (word) { document.write(msg + word); } ask () { document.write("Say Something Please"); setTimeout(() => this.say("webpack"), 1000); } }

- index.js

import css from "./index.css"; import Hello from "./hello.js"; new Hello().ask();

- index.css

html,body{ margin:0; padding:0; } body{ background:red; color: #fff; font-size: 40px; }

3.安装部分所需依赖

npm install --save-dev babel-core babel-loader babel-plugin-syntax-dynamic-import babel-preset-es2015：因为用到了es6的语法，所以我们需要对es6语法进行转换 npm install style-loader --save-dev css-loader --save-dev：安装处理css的loader

4.配置webpack.config.js

const path = require('path'); module.exports = { entry: './app/index.js', output: { filename: 'bundle.[hash].js', path: path.resolve(__dirname, 'dist') }, module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', query: { presets: ['es2015'] } }, { test: /\.css$/, loaders: ['style-loader', 'css-loader'] } ] } };

path: path是Node中的内置对象，也是Node的核心模块之一，这里引入path对象，主要是为了控制生成文件的目录path.resolve(__dirname, 'dist')这句话中，resolve会将参数中的路径或路径片段的序列解析为一个绝对路径，__dirname表示当前文件模块所在的完整的绝对路径，这样即使项目迁移，地址变更，只要保证相对路径正确即可。
context：上下文，这里省略了，默认为当前文件模块的绝对路径，下面的entry和output中的路径都是相对于context上下文的相对路径
entry：入口文件，如果有多个不同的入口文件，可以写成对象的形式
output：配置webpack打包后输出文件的参数
filename: 输出的文件名，'bundle.[hash].js'中，hash是webpack会生成一个hash值，这里还可以有的写法如：'[name].[hash].js'指的是 入口文件的名字.hash值.js hash也可以改成chunkhash，如果entry中有多个入口文件，则每一次某个文件的改动都会引起所有输出文件hash值得改变，而chunkhash只会影响有改动模块文件。
path: 生成文件的输出路径
modules: 配置不同文件所需要的loaders以及插件配置，至于什么文件需要什么loaders，在官网和很多地方都可以找到说明。