Webpack项目构建

万物皆模块：在 webpack 的世界中，除了 Javascript，其他任何资源都可以当做模块的方式引用

按需加载： webapp 的优化关键在于代码体积，当应用体积增大，实现代码的按需加载是刚需，这也是 webpack 出现的根本原因

可定制化： 任何一个工具都不可能解决所有问题，提供解决方案才是最可行的，webpack 基于可定制化的理念构建，通过插件系统，配置文件，可以实现大型项目的定制需求。

1. webpack加载器（loader）

所有资源都是”模块“， 这是webpack的设计理念，不同于CMD,AMD机制，其内部实现了一套资源加载机制。
Webpack提供了一套加载器：

• css/style loader: 加载css文件；
• less-loader: 编译less成为css;
• url-loader: 在js中加载png/jpg格式的图片文件；
• babel-loader: 将ES6的代码转换成ES5代码

module.exports = {
//模块的入口文件。依赖项数组中所有的文件会按顺序打包，每个文件进行依赖的递归查找，直到所有模块都被打成包；
  entry: "./src/main.js",
//模块的输出文件：
  output: {
    //打包后的文件名
    filename: "build.js",
    //打包文件的绝对路径
    path: __dirname + '/assets/',
    //网站运行的访问路径
    publicPath: "/assets/"
  }，
  module: {
  //正则匹配加载器，除（sass类型）
    loaders: [
      {test: /.css$/, loader: 'style!css'},
      {test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'}
    ]
  }
  resolve: {
  //模块别名定义，方便后续直接引用别名，无须多写长长的地址
    extensions: ['', '.js', '.jsx'],    
    alias: {
        a : 'js/assets/a.js',  // 后面直接引用 require(“a”)即可引用到模块
        b : 'js/assets/b.js',
        c : 'js/assets/c.js'
    }
  },
  //插件项
  plugins: [commonsPlugin, new ExtractTextPlugin("[name].css")]
}

---

2. 配置文件

package.json:

{
  "name": "html-webpack-plugin",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^2.19.0",
    "webpack": "^1.13.1"
  }
}

webpack.config.js:

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

//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);

var SRC_PATH = path.resolve(ROOT_PATH, 'src');

var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
console.log(SRC_PATH)
module.exports = {

  entry: SRC_PATH + "/js/index.js",
  //输出的文件名 合并以后的js会命名为index.js
  output: {
    path: BUILD_PATH,
    filename: 'index.js'
  },
  //添加我们的插件 会自动生成一个html文件
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Hello World app'
    })
  ]
};

3.压缩js与css

webpack已经内嵌了uglifyJS来完成对JS与CSS的压缩混淆，无需引用额外的插件。

配置文件更改如下：

var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var webpack = require("webpack");
//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);

var SRC_PATH = path.resolve(ROOT_PATH, 'src');

var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
console.log(SRC_PATH)
module.exports = {

  entry: {
    'index' : SRC_PATH + "/js/index.js"
  },
  //输出的文件名 合并以后的js会命名为index.js
  output: {
    path: BUILD_PATH + '/js/',
    filename: '[name].js'
  },
  //添加我们的插件 会自动生成一个html文件
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Hello World app',
      minify:{ //压缩HTML文件
        removeComments:true,    //移除HTML中的注释
        collapseWhitespace:true    //删除空白符与换行符
      }
    }),
    new webpack.optimize.UglifyJsPlugin({    //压缩代码
       compress: {
           warnings: false
       },
       except: ['$super', '$', 'exports', 'require']    //排除关键字
    })
  ]
};

4. webpack打包多个资源文件

即引入多个入口函数，按需加载：

module.exports = {
  entry: {
     "main": "./src/a.js",
     "index": "./src/index.js"
  },
  output: {
    filename: "[name].js"
  }
};