webpack

用法

安装

前提是安装最新版的node.js，旧版本可能会导致缺少webpack功能或者缺少相关package包。

• 本地安装

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

如果使用了npm script，npm会首先在本地模块中寻找webpack。

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

上述是npm的标准配置，是推荐的做法

当在本地安装了webpack之后，能在node_modules/.bin/webpack 找到它的二进制程序

• 全局安装
  npm install webpack -g

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

全局安装之后 webpack命令可以全局执行了

使用举例

demo1 ：简单使用

本地安装之后，可以在使用npm script,设置一个命令，

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack app.js app.merge.js"
  },

这样就可以不全局安装，只要本地安装了之后，就可以运行npm run webpack进行打包
那么有2个js文件，
cats.js

var cats = ['hauhua','xiaohei','abai','deejay'];

module.exports = cats;

只需要module.exports即可
app.js

var cats = require('./cats.js');

console.log(cats);a

要引用模块，require即可
然后使用webpack将app.js 打包成app.merge.js
webpack app.js app.merge.js
打包成的app.merge.js即为浏览器可以识别运行的js文件

demo2 ： webpack配置文件的使用

如果项目工程比较复杂的情况下，一般也要写配置文件，并且要根据文件类型的不同，将其放到不同的文件夹下，一般源代码放到src文件下，生成的打包文件放到bin下，而node_modules文件夹就相当于加工的机器，src侠的相当于原材料，bin下的相当于加工好的成品，用户看到的只有成品。

对于上述例子，创建src,bin2个文件夹，把app.js cats.js放到src下，进行npm init,然后安装webpack,即：
mkdir src
mkdir src
mv app.js cats.js src
npm init
npm install webpack -D

当项目增加的很复杂时，不适用于命令行操作，我们可以创建一个配置文件。
touch webpack.config.js

webpack.config.js：

module.exports = {
    entry: './src/app.js',
    output: {
        path: './bin',
        filename: 'app.merge.js'
    }
}

写好配置文件之后 ， 直接命令行使用webpack即可得到app.merge.js

loaders

webpack只支持原生的js打包，对于ES6，CoffeScript，TypeScript等，可以使用各种loader来进行转换，比如说ES6的babel-loader。

plugins

有一些插件用于结果的优化等。