webpack2-webpack.config.js配置

 写在前面:

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

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

 

一、代码分割:

   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)

     

 

 二、生产与开发需要不同的webpack.config.js

  1.package中配置不同的script command

    

  2.webpack.config.js也是一个js模块,可以使用不同个参数配置,然后在npm 中加入参数值

    

    

   3. webpack-merge插件

    

 

 三、缓存

  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,不会因为样式文件的变化而变化。

 四、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
    }

 

posted @ 2017-02-21 20:05  miaowwwww  阅读(4849)  评论(1编辑  收藏  举报