我的WebPack入门（一）

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

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

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

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

安装（Installation）

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

2. 新建webpack文件夹，Terminal/cmd切换到webpack文件夹下，执行npm init -y生成package.json文件

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

3. npm install webpack --save-dev 如果想要安装特定版本的webpack可以使用 npm install webpack@<version> --save-dev，将version换成想要的版本号即可。

   • --save：save 的意思是把安装信息保存到 package.json中，打开package.json会发现多了devDependencies项已经把webpack添加进去了："devDependencies": {"webpack": "^2.2.1"}；

   • -dev：dev的意思是当前安装插件是放在"devDependencies"中，表示是开发时所需依赖，正式生产环境所需依赖不需要添加-dev，是会放在"Dependencies"中

开始（Getting Started）

1. 首先建好文件目录

   • webpack.config.js：类似gulpfile.js，配置相关设置，我觉得放在根目录下会合适一些，在配置path时会方便一些，执行webpack命令时会默认搜索webpack.config.js文件，也可以通过指定 –config指定其他文件为配置文件

   • app：存放项目文件模块

     • PS：在模块化开发中，这种文件目录是不推荐的，需要依模块来划分文件目录

   • dist：存放webpack处理后的文件

2. 新建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，在官网和很多地方都可以找到说明。

其实关于output/modules都还有很多参数配置和方法，不过对于入门，在上面这些东西搞明白后，就已经可以跑起来一个简单的流程了。更多的知识，在后期遇到其他的痛点时会去搞明白的。

我的WebPack入门（二）