webpack-2-基本配置

webpack 2 基本配置，DevServer 配置

说明

最近重构代码时，把 webpack 升级到了 2.2.1，结果完全无法运行，正好看到了这份文档，讲解的很详细，所以就学习了一下，应用到项目中。

webpack 开发跨域问题解决

列出版本

• “webpack”: “^2.2.1”,
• “webpack-dev-server”: “^2.4.1”,
• “webpack-md5-hash”: “0.0.5”,
• “webpack-merge”: “^4.0.0”

配置

1. 整体

webpack 配置文件就是 JavaScript 文件导出的一个对象，webpack 根据定义的属性来进行解析。

2. entry(入口)

入口文件告诉webpack 从哪里开始进入文件，顺着依赖关系打包文件，一般设置成应用的启动文件

entry 的值 可以是 string | Array 或者是一个对象，包含入口文件的路径，或者模块名

一般写法

entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
}

复杂一点的写法，分离应用程序和公共库

    entry: {
        app: './app/js/index.js'
        vendor: ['react', 'react-router', 'redux', 'react-redux', 'react-dom']
    },

3. output(出口)

webpack 打包文件后，还要告诉他，打包后的文件名变化，输出位置，注：可以有多个入口，但是出口配置只有一个

output 的值是一个对象，具有以下属性

output.path

对应文件打包后的输出目录，需要绝对路径，可使用 node.js path 模块 path.resolve([from...],to)实现

output.filename

指定每个输出文件的文件名格式，如果配置了多个入口文件，或者拆分了模块，可以通过 [name]、[hash]或者[chunkhash] 替换相应的文件名。

output.chunkFilename

非入口模块 chunk 的文件名, 路径相对于 output.path 目录。同理，可以用 [id]、[name]、[hash]、[chunkhash]，作为输出文件名设置

output.publicPath

最后转换为 html 引入的模块的 url 的前半部分，开发时 设置为 ‘/’ 就可以了，生产环境下要设置为产品上线时的地址 ‘http://xxx.xx’

例子

    output: {
        path: path.resolve(__dirname, 'dev'),
        filename: 'js/bundle.js',
        publicPath: '/',
        chunkFilename: '[name].chunk.js'
    },

4. loader(加载器)

loaders 是将对应程序中的文件进行转换，然后返回新的文件，这样可以打包 JavaScript 之外的其他文件。

注意：webpack 1.x 中的 module.loaders 已经改成了 module.rules，写法上稍有不同
module.rules 允许你在 webpack 中指定几个 loader

    module: {
        // loaders: [] // 2.x 兼容
        rules: [    // rules 代替 loaders 
            {
                test: /\.(scss|sass)$/, // test 定义文件匹配规则
                include: APP_PATH,  // 表示必须匹配选项
                // exclude: 'node_modules' 表示必须不匹配选项
                // enforce: 'pre'|'post' 表示 loader 的前置和后置
                use: [      // use 代替 loaders 更加明确，以loaders 数组的形式展现
                    'style-loader', 
                    'css-loader', 
                    'postcss-loader', 
                    'sass-loader?outputStyle=expanded' // ? 后边跟 loader 的配置选项，也可以使用 options
                ]
            },
            {
                test: /\.css$/,
                use: [
                    { loader: 'style-loader'},
                    {
                        loader: 'css-loader'},
                        options: {      // 属性 跟 query 一样，可以传递到 loader 中，代表 loader 的选项
                            modules: true
                        }
                    }
                ]
            }
        ]
    }

5. resolve(解析)

用来设置模块如何被解析

resolve.alias

创建 import 或 require 的别名，来确保模块引入变得更简单。例如，一些常用模块：

    resolve: {
        alias: {
            Request$: path.resolve(__dirname, 'app/js/request.js')
        }
    }

    // 使用前
    import Request from 'app/js/request.js';
    // 使用后
    import Request from 'Request';

resolve.extensions

自动解析确定的扩展，能够使用户在引入时不带扩展

    resolve: {
        extensions: ['.js', '.json', '.scss', 'css']
    }

    // 使用后
    import File from './app/js/utils/request';

resolve.modules

告诉 webpack 解析模块时，应该搜索的目录

    resolve: {
        modules: [
            path.resolve(__dirname, 'app'),
            'node_modules'
        ]
    }

6. devtool(开发工具)

定义如何生成 Source Map

    devtool: 'cheap-module-source-map'

跟多 Source Map 可以看官方文档

7. plugins(插件)

扩展功能

常用插件

• 1. html-webpack-plugin 按照模板生成 HTML，动态添加 js 和 css，（2.x没有变化）
• 1. webpack-merge 非插件，用于将两个 webpack 配置文件合并为一个，（2.x新增）
• 1. extract-text-webpack-plugin 抽取 CSS 模块 生成单独文件，（2.x写法有变化）
• 1. chunk-manifest-webpack-plugin 配合 webpack.optimize.CommonsChunkPlugin,将 manifest 提取到一个单独的json 文件中，解决长效缓存的问题
• 1. webpack-md5-hash 使生成的 hash 值 是基于文件内容的
• 1. webpack.optimize.CommonsChunkPlugin 用于提取公共模块，单独打包成一个文件，（2.x写法略有不同）
• 1. webpack.DefinePlugin 用于定义环境变量，（2.x没有变化）
• 1. webpack.LoaderOptionsPlugin 代替 1.x 版本中 loader 的扩展配置功能，（2.x新增）
• 1. webpack.optimize.UglifyJsPlugin js 代码压缩，（2.x更改了默认配置）
• 1. webpack.HotModuleReplacementPlugin 开启全局的模块热替换(HMR)
• 1. webpack.NamedModulesPlugin 当模块热替换(HMR)时在浏览器控制台输出对用户更友好的模块名字信息

8. devServer

便于快速开发应用程序

devServer.contentBase

告诉服务器从哪里提供内容，默认情况下，将使用当前工作目录作为提供内容的目录

contentBase: path.resolve(__dirname, 'dev'),

devServer.publicPath

此路径下的打包文件可在浏览器中访问。注：确保 publicPath 总是以斜杠(/)开头和结尾。
在热模块替换中，必须设置此项，而且需要和 output.publicPath 一致

publicPath: '/',

devServer.historyApiFallback

react 项目开发，设置可以从任意的URL 访问

historyApiFallback: true,

devServer.clientLogLevel

减少控制台无用的信息打印

devServer.host|port

可以用来设置服务器外部可以访问的 ip 和 端口

devServer.open|hot|inline|compress

设置 打开一个新的浏览器窗口|启用 webpack 的模块热替换特性|启用内联模式|启用gzip压缩

devServer.stats

控制 bundle 信息展示,可以自定义展示规则，参考文档

下一篇 配置实例