webpack2-webpack.config.js配置

 写在前面：

　　了解更多：https://github.com/miaowwwww/webpack-learn

　　贴一个webpack.ocnfig.js 的配置属性表　　　　

 

1、代码分割：

 　　1.插件 CommonsChunkPlugin ：提取vendor的插件，过滤每个入口文件，提取公共的模块，放到一个vendor.js文件中

　　　　 

　　2.css代码分割

　　　　2.1引入插件(同时能够配置）

 　　

　　　　2.2 配置loader

　 　

　　　　2.3 plugin中加入

　 　

 　　　　2.4 若使用extractCss，extractLess两个则会出现verdon.css（公共css样式）

 　　3.使用 import() ：使用jsonp技术加载

　　　　3.1  npm install -save-dev babel-plugin-syntax-dynamic-import 如今是必须的，import()加入规范后就不是了

　　　　3.2 配置babel-loader

　　　　

　　　　3.3 使用方法：好处，由于是promise，因此能够操做加载失败的状况

　　　　

 

 　　4.使用require.ensure：使用jsonp技术加载

　　　　好处：能够为异步模块定义[name]（requireEnsure-chunk）

 　　　　

 

 2、生产与开发须要不一样的webpack.config.js

　　1.package中配置不一样的script command

　　　　

　　2.webpack.config.js也是一个js模块，可使用不一样个参数配置，而后在npm 中加入参数值

　　　　

 　　　

 　　3. webpack-merge插件

　　　　

 

 3、缓存

　　1.hash & chunkhash　

 　　　　hash：每一次编译就会发生变化

　　　　chunkhash：文件内容变化，就会发生变化（webpack中，若是js文件引入了css文件，那么他们就是一个总体，某一个变都会致使chunkhash变化）

　　　　建议：不要在开发中使用[chunkhash]，由于这将增长编译时间。单独的开发和生产配置，并使用[name] .js用于开发，[name]。[chunkhash] .js用于生产。

　　　　extract-text-webpack-plugin: 为打包出来的样式文件提供 contenthash，只要样式文件内容不变，就不会变化，

　　　　webpack-md5-hash： 替代chunkhash， 由于若只要样式变化，js没变，chunkhash也会变化，这个令chunkansh，不会由于样式文件的变化而变化。

 4、webpack-dev-server

 　　能够webpack.config.js中配置，经常使用属性： compress，port，host， hot， inline

　　　一个坑，下面的 hot 属性官网解析为是否启动热更新，然而并无什么卵用，打开浏览器会说 HMR不可用， 须要在cmd中使用 --hot才行，  $ webpack-dev-server --hot  

    devServer: {
        // --告诉服务器从哪里提供内容。这只有在您想要提供静态文件时才须要。例如图片？？
        contentBase: path.join(__dirname, 'dist'),
        // contentBase: false,
        // --告诉服务器观看由devServer.contentBase选项提供的文件。文件更改将触发整个页面从新加载。
        watchContentBase: true,
        // --随全部内容启用gzip压缩
        compress: true,
        port: 9997,
        host: '0.0.0.0',
        // --这个是使用热更新的标志，而后并不提供热更新功能，须要引入hotModule
        // hot:true, 不加入HotModuleReplacementPlugin，由于API没法访问您的webpack配置
        // --hot添加它。 （由于CLI能够访问您的webpack配置）
        hot: true,
        // --在构建失败的状况下，启用热模块替换（请参阅devServer.hot）而不刷新页面做为回退。
        hotOnly: true,
        // --devtool控制台显示信息
        clientLogLevel: 'none', //none, info, (warning,error 一直有）
        // --延迟编译，对于异步模块，只有在请求时才会编译，在生产中不须要
        lazy: true,
        filename: "bundle.js",
        // --为全部请求添加请求头
        headers: {
            "X-Custom-Foo": "bar"
        },
        // --使用HTML5 History API时，系统可能会放送index.html网页来取代404回应
        historyApiFallback: true,
        // historyApiFallback: {
        //     rewrites: [
        //         { from: /^\/$/, to: '/views/landing.html' },
        //         { from: /^\/subpage/, to: '/views/subpage.html' },
        //         { from: /./, to: '/views/404.html' }
        //     ]
        // }
        https: true, //使用https协议
        // --在开发服务器的两种不一样模式之间切换(--inline, --iframe)。默认状况下，将使用内联模式启用应用程序。这意味着一个脚本将插入到您的包中以处理实时从新加载，而且构建消息将显示在浏览器控制台中。
        inline: true,
        // --隐藏webpack打包是的信息
        noInfo: true,
        // --使用代理，须要 http-proxy-middleware  代理包,链接后台接口的时候使用
        proxy: {
            "/api": "http://localhost:3000"
        //     "/api": {
        //         target: "http://localhost:3000",
        //         pathRewrite: {"^/api" : ""},
        //         secure: false
        //     }
        },
        public: "myapp.test:80",
        // --也是静态文件的目录， 至关于 output.publicPath
        publicPath: "/assets/",
        // --启用安静功能后，除了初始启动信息以外的任何内容都将写入控制台。这也意味着来自webpack的错误或警告不可见。
        quiet: true
    }