Webpack入门（详细）

介绍

webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片(压缩)等都作为模块来使用和处理。更具体的学习可以看官方文档https://webpack.js.org/concepts/这里是根据webpack2.0版本的

---

优点

1. webpack 是以 commonJS 的形式来书写脚本，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
2. 能被模块化的不仅仅是 JS 了，还有CSS，图片等。
3. 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
4. 并且github上有很多项目是基于webpack构建的

---

安装

• 前提条件
  在开始前，先要确认你已经安装 Node.js 的最新版本。使用 Node.js 最新的 LTS 版本，是理想的起步。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能或缺少相关 package 包。

• 本地安装，先建立webpack-demo文件，在webpack-demo/app下建立index.js(方便测试),再安装webpack

npm install --save-dev webpack
npm install --save-dev webpack@<version>

• 全局安装（可以先全局安装，才能直接使用webpack命令，在具体的项目中局部安装）

npm install --global webpack

注意，不推荐全局安装 webpack。这会锁定 webpack 到指定版本，并且在使用不同的 webpack 版本的项目中可能会导致构建失败。

---

配置

先生成package.json

npm init

再创建
webpack.config.js,
每个项目下都必须配置有一个 webpack.config.js,告诉webpack该干什么。
注意整个配置中我们使用 Node 内置的 path 模块

var path = require('path');

module.exports = {
    // 单页面入口文件
    entry:  './app/index.js',
    /* 多入口  
     entry:['./app/index.js','./app/index1.js'] 
     */
     /* 对象
     entry:{name: './app/index.js',home: './app/index1.js'}
     */
    // 入口文件输出配置
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

---

运行

• webpack 默认是运行webpack.config.js
  命令：

> webpack

最终会在/dist下生成bundle.js文件

• 如果修改webpack.config.js为mywebpack.config.js，则运行需要修改

webpack --config mywebpack.config.js

再运行webpack即可

• 如果你在项目中使用了 npm scripts（在package.json中加入），npm 首先会在本地模块中寻找 webpack。这是一个实用的小技巧。

"scripts": {
    "start": "webpack --config mywebpack.config.js"
}

运行npm run start即可

• 其它参数

$ webpack --config XXX.js   //使用另一份配置文件（比如webpack.config2.js）来打包
 
$ webpack --watch   //监听变动并自动打包
 
$ webpack -p    //压缩混淆脚本，这个非常非常重要！
 
$ webpack -d    //生成map映射文件，告知哪些模块被最终打包到哪里了

$ webpack --progress //显示进度条

$ webpack --color //添加颜色

其中的 -p 是很重要的参数，曾经一个未压缩的 700kb 的文件，压缩后直接降到 180kb（主要是样式这块一句就独占一行脚本，导致未压缩脚本变得很大）。

---

插件

• html插件
• 安装

npm install html-webpack-plugin --save-dev

• 使用

var path = require('path');
// 引入插件
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        home: './app/index.js',
        work: './app/index1.js'
    },
    output: {
        filename: 'js/[chunkhash]bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    // 插件应用
    plugins: [
        new htmlWebpackPlugin({
            template: 'index.html'
        })
    ]
};

• 自动打包插件

module.exports = {
  // …
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "commons",
      filename: "commons.js",
      minChunks: 2,
    }),
  ],
// …
};

如果有任意模块加载了两次或更多（通过 minChunks 设置该值），它就会被打包进一个叫 commons.js 的文件里，后面你就可以在客户端缓存这个文件了。

---

开发

实际上 Webpack 有它自己的开发服务器，通过 devServer 对象可以创建一个服务器：

module.exports = {
  context: __dirname + "/src",
  entry: {
    app: "./app.js",
  },
  output: {
        filename: 'js/[chunkhash]bundle.js',
        path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: __dirname + "/src",  
  },
};

运行

// 安装
npm install --save-dev webpack-dev-server
// 运行
webpack-dev-server

如果不能运行，尝试

node_modules/.bin/webpack-dev-server

服务器现在就运行在了 localhost:8080 上。

---

#Loader
目前为止，我们所讲到的都是关于 JavaScript 代码的使用。从 JavaScript 代码开始是非常重要的，因为 这是 Webpack 唯一使用的语言 。我们可以处理任何文件类型，只要将它们传进 JavaScript 代码中。这个功能用 Loaders 来实现。

一个 loader 可以指向一个像 Sass 的预处理器，或者像 Babel 的编译器。

安装使用步骤

1. install loader
2. module中配置

---

Babel+ES6

• 安装

npm install --save-dev babel-loader
npm install babel-core --save-dev
// 安装ES2015支持
npm install babel-preset-es2015 --save-dev

• 配置

var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/app.js',
    output: {
        filename: 'js/bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new htmlWebpackPlugin({
            template: 'index.html'
        })
    ],
    module: {
        rules: [{
                test: /\.js$/,
                use: ['babel-loader'],
                options: { presets: ['es2015'] }

            }

            // Loaders for other file types can go here
        ],
};

这样就完成了

---

css-loader

• install

npm install css-loader style-loader --save-dev

• 配置

    module: {
        rules: [{
                test: /\.js$/,
                loader: 'babel-loader',
                options: { presets: ['es2015'] }

            }, {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }

            // Loaders for other file types can go here
        ],

---

sass-loader

• 安装。由于需要node-sass配合，也一起安装

npm install sass-loader --save-dev
npm install node-sass --save-dev

如果不成功，可以用淘宝镜像安装

npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass

• 配置

{
     test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
}

• 常用loader

  1. 处理样式，转成css，如：less-loader, sass-loader

  2. 图片处理，如: url-loader（以base64显示）, file-loader，image-webpack-loader(压缩图片)。（url-loader、file-loader)两个都必须用上。否则超过大小限制的图片无法生成到目标文件夹中

  3. 处理js，将es6或更高级的代码转成es5的代码。如： babel-loader，babel-preset-es2015，babel-preset-react

  4. 将js模块暴露到全局，如果expose-loade