webpack 配置总结

entry入口文件配置：

配置entry入口配置有三种写法，每一个入口称为chunk。

• 字符串：
  entry: ‘./index/index.js’: 配置模块会被解析为模块，并在启动时加载。chunk名默认为mian，具体打包文件名视output配置而定。

• 数组：
  entry: [‘./src/mod1.js’, […,], [./src/index.js]]:所有的模块在启动时按照配置顺序加载，合并到最后一个模块会被导出。chunk默认为main。

• 对象：
  entry: { index: ‘…’, login: […]}: 如果传入object，则会生成多个入口打包文件，key是chunk名，value可以是字符串，也可以是数组。

例如：

 entry: {    index: './index/index.js',    login: ['./mod/mod1.js', './index/login.js'] }

配置输出目录

设置入口配置的文件的输出规则，通过output对象实现，常用配置：

• output.path: 指定输出文件路径，通常设置为__dirname + ‘./build’，
• output.filename: 输出文件名称，有下面列出的四种可选的变量。filename项的配置可以使这几种的任意一种或多种组合。如：output.filename=’[name]-[id].js’，则输出就是index-1.js。
  
  • [id]，chunk的id
  • [name]，chunk的名
  • [hash]，编译哈希值
  • [chunkhash]，chunk的hash值
• output.publicPath:设置为想要的资源访问路径。

配置loader

    modules: {        loaders: [            test: /\.js$/,            exclude: /node_modules/, //匹配不希望处理文件的路径            loaders: 'xxx-loader?a=x&b=y' //此处xxx-loader可简写成xxx,?后可以query方式传递给loader参数        ]    }

• 多loader调用示例：
  在js中，如果要直接解析某个文件，你可以采用：

    require('jade!./index.jade')

如果要解析css，并内联之，需要使用分隔符！

    require(!style!css!./style.css)

同理，如果要解析less，转换成css之后，再内联之，写法如：

    require('!style!css!less./style.less!'); //此语句的含义是，先调用less-lader解析style.less文件，输出结果会被css-loader处理，然后再被style-loader处理

同理，在webpack.config.js配置文件中，只需要指定处理的loader序列：

    loaders: [        {            test: /\.less$/,            loader: '!style!css!less'        }    ]

CSS文件单独抽取（extract-text-webpack-plugin）

在webpack默认对css打包压缩的处理中，对css文件经过处理之后是在js文件中然后通过在页面的style中插入。那么如何把css单独抽取成一个文件，同时使js文件不融入css呢？这时需要extract-text-webpack-plugin插件

• 优点：
  1 更少的style tag（IE对此有限制）
  2 可以生成便于开发环境测试的CSS source-map
  3 减少DOM操作

• 使用

    new ExtractTextPlugin(options: filename | object)

• 常用配置

    var ExtractTextPlugin = require('extract-text-webpack-plugin');    module.exports = {        module: {            loaders: [                {                    test: /\.css$/,                    loader: ExtractTextPlugin.extract(                        "style-loader",                        "css-loader?sourceMap"                    )                }, {                    test: /\.less$/,                    loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")                }            ]        },        plugins: [            new ExtractTextPlugin("css/[name].css?[hash]-[chunkhash]-[contenthash]-[name]", {                disable: false,                allChunks: true            })        ]    }

esLint配置

ESLint是js中目前比较流行的插件化的静态代码检测工具。通过使用它可以保证高质量的代码，尽量减少和提早发现一些错误。使用eslint可以在工程中保证一致的代码风格，特别是当工程变得越来越大、越来越多的人参与进来时，需要加强一些最佳实践。

• 配置

    module: {        preLoaders: [            {                test: /\.js$/,                exclude: /node_modules/,                loader: 'eslint-loader'            },        ],        loaders: [            {                test: /\.js$/,                exclude: /node_modules/,                loader: 'eslint-loader'            }        ]    }    //需要配置在webpack-dev-server    eslint: {      configFile: './.eslintrc'    },

• 使用：
  需要在根目录中新建一个.eslintrc文件，然后在webpack文件中配置使用。

.eslintrc文件配置：参看

webpack.optimize.commonChunkPlugin的使用介绍

使用

    new webpack.optimize.commonChunkPlugin(options | object);

    module.exports = {        entry: {            'user': '/src/user.js',            'index': '/src/index.js',            'mian'        }    }

• 配置一： 传入string类型
  默认打包所有文件

    new webpack.optimize.commonChunkPlugin('main.js') //默认会把所有入口节点的公共代码提取出来,生成一个common.js

• 配置二： 传入字符串，同数组
  有选择的提取公共代码

    // 提供公共代码    // 默认会把所有入口节点的公共代码提取出来,生成一个common.js    // 只提取main节点和index节点    new webpack.optimize.commonChunkPlugin('main.js', ['index', 'main']) 

• 配置三： 传入对象

有选择的提取公共代码

    // 提供公共代码    // 默认会把所有入口节点的公共代码提取出来,生成一个common.js    // 只提取main节点和index节点    new webpack.optimize.commonChunkPlugin({        name: 'main.js',         chunks: ['index', 'main']    })

webpack-dev-server的配置

• hot选项 true

浏览器自动打包并刷新，但并不是全部刷新，也就是刷新更新部分

• inline选项 true

浏览器自动打包并刷新

• iFrame选项 true

自动打包，但是浏览器并不自动刷新

• 启动热替换 plugins: [new webpack.HotModuleReplacementPlugin()]

• 一般配置如下：

    module.exports = {        ···        devtool:  'source-map',        devServer: {            port: 8080,            contentBase: './build',            hot: true, //自动打包，浏览器自动刷新，不完全刷新，改动部分局部刷新            inline: true, //自动打包，浏览器自动刷新            // iFrame: true,  //自动打包，但是浏览器不自动刷新            historyApiFallback: true,            publicPath: "",            stats: {                colors: true            },            plugins: [                new webpack.HotModuleReplacementPlugin()            ]        }        ···    }

配置开发环境及正式环境

在package.json文件中配置：

    "scripts": {        "dev": "webpack-dev-server --progress --colors",        "build": "webpack -p",        "deploy": "set NODE_ENV=production&&webpack -p --progress --colors",        "test": "echo \"Error: no test specified\" && exit 1"  },

webpack-dev-server命令与webpack -p的区别：
webpack-dev-server是开发环境，构建在内存之中，同时提供服务器开发；而webpack -p仅仅是构建