视频学习webpack打包

前言

webpack主要用于，对css，js进行编译打包合并生成md5，CSS中的图片处理，js自动注入html页，删除指定文件，提取公共文件，热更新等等。

安装

//全局安装 
npm install -g webpack webpack-cli
npm install webpack --save-dev  //开发环境

使用webpack

在package.json文件同级目录中创建一个webpack.config.js文件，这个文件是webpack的配置文件。

const webpack = require('webpack');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    
    //页面入口文件配置
    entry: {
       polyfills: './src/main/webapp/app/polyfills',
        global: './src/main/webapp/content/scss/global.scss',
        main: './src/main/webapp/app/app.main'
    },
    //入口文件输出配置
    output: {
        path: utils.root('build/www'),
        filename: 'app/[name].bundle.js',
        chunkFilename: 'app/[id].chunk.js'
    },
    module: {
        //加载器配置
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            //图片文件使用 url-loader 来处理，小于8kb的直接转为base64
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },
    //解析模块路径时的配置
    resolve: {
        root: 'E:/github/flux-example/src', //绝对路径,查找module的话从这里开始查找
        extensions: ['', '.js', '.json', '.scss'], //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
        alias: {  //别名配置，，方便后续直接引用别名，无须多写长长的地址
            AppStore : 'js/stores/AppStores.js',  后续直接 require('AppStore') 即可
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    },
//插件项
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor',
                chunks: ['main'],
                minChunks: (module) => utils.isExternalLib(module)
            }),
        new BrowserSyncPlugin({
            host: 'localhost',
            port: 9000,
            proxy: {
                target: 'http://localhost:9060',
                ws: true
            }
        }, {
            reload: false
        }),
        new HtmlWebpackPlugin({
                template: './src/main/webapp/index.html',
                chunksSortMode: 'dependency',
                inject: 'body'
         })
   ],
};

devtool: ‘eval-source-map’ // webpack就可以在打包时为我们生成的source maps，这为我们提供了一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，也更容易调试

在webpack的配置文件中配置source maps，需要配置devtool，它有以下四种不同的配置选项，各具优缺点，描述如下：(表格数据来自引用)

devtool选项	配置结果
source-map	在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包速度；
cheap-module-source-map	在一个单独的文件中生成一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；
eval-source-map	使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项；
cheap-module-eval-source-map	这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点；

正如上表所述，上述选项由上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的打包速度的后果就是对打包后的文件的的执行有一定影响。

webpack 命令参数：
$ webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）来打包

$ webpack --watch //监听文件是否有改变，有改变就会重新编译有改变的文件

$ webpack -p//压缩混淆脚本

$ webpack -d//生成map映射文件，告知哪些模块被最终打包到哪里了
$ webpack --progress //显示打包过程进度条
$ webpack --color //配置打包输出颜色显示

指令

为不同环境配置可执行指令，我们使用npm scripts方式，在package.json文件中配置执行指令：

{
  "scripts": {
    "start": "cross-env NODE_ENV=dev webpack-dev-server",
    "build": "cross-env NODE_ENV=production webpack"
  }
}

**start：**开发环境运行指令，使用cross-env三方库设置process.env.NODE_ENV为dev，并在本地开启webpack开放服务器，方便开放；
**build：**生产环境运行指令，使用cross-env三方库设置process.env.NODE_ENV为production，将打包输出代码和资源文件；