Webpack

培训

常见的模块系统

• 标签引入
• CommonJS
• AMD
• CMD
• UMD
• ES6(ES2015)

开工

正文和webpack官网文档相似度高于60%，属于转载，不喜欢在这看白开水的同学，可自行去官网查看

安装

请确保本机有node环境

$ npm i webpack -g

项目目录中再安装一次，保留配置项

...
mkdir webpack-test
cd webpack-test
npm init -y
npm i webpack --save-dev

配置

套路比较多，这次仅介绍目前项目中普遍能使用的

配置文件

项目根目录新建 webpack.config.js

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
  //插件项
  plugins: [commonsPlugin],
  //页面入口文件配置
  entry: {
    index: './src/js/page/index.js'
  },
  //入口文件输出配置
  output: {
    path: 'dist/js/page',
    filename: '[name].js'
  },
  module: {
    //加载器配置
    loaders: [
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      { test: /\.js$/, loader: 'jsx-loader?harmony' },
      { test: /\.less$/, loader: 'style!css!less?sourceMap' },
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
    ]
  },
  //其它解决方案配置
  resolve: {
    root: 'E:/github/flux-example/src', //绝对路径
    extensions: ['', '.js', '.json', '.scss'],
    alias: {
      AppStore: 'js/stores/AppStores.js',
      ActionType: 'js/actions/ActionType.js',
      AppAction: 'js/actions/AppAction.js'
    }
  }
};

plugins

插件项，使用了一个 CommonsChunkPlugin 插件，它用于提取多个文件的公共脚本部分，然后生成一个 common.js 方便复用。

entry 和 output

entry 页面入口文件配置，output 输出项配置，写法：

{
    entry: {
        page1: "./page1",
        //支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出
        page2: ["./foo1", "./foo2"]
    },
    output: {
        path: "dist/js/page",
        filename: "[name].bundle.js"
    }
}

将生成 page1.bundle.js 和 page2.bundle.js，并存放到 ./dist/js/page 文件夹下

module.loaders

这里是核心配置（敲黑板）
用于给每种不同扩展名的文件增加加载器（loader）
"-loader"是可以省略，多个loader之间用“!”连接起来。
使用加载器时需安装 npm install style-loader -save-dev

 module: {
        //加载器配置
        loaders: [
            //.css 文件使用 style-loader 和 css-loader 来处理
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            //.js 文件使用 jsx-loader 来编译处理
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            //.less 文件使用 style-loader、css-loader 和 less-loader 来编译处理
            { test: /\.less$/, loader: 'style!css!less?sourceMap'},
            //图片文件使用 url-loader 来处理，小于8kb的直接转为base64
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    }

webpack全loader地址

resolve

resolve: {
        //查找module的话从这里开始查找
        root: 'E:/html/webpack-test/src', //绝对路径
        //自动扩展文件后缀名，类似seajs或requirejs的省略后缀
        extensions: ['', '.js', '.json', '.less'],
        //模块别名定义，方便直接引用别名，类似seajs或requirejs
        alias: {
            jQuery : 'js/module/jQuery.js',//后续直接 require('AppStore') 即可
            moment : 'js/module/moment.js',
        }
    }

webpack config 详细文档