webpack2-webpack.config.js配置

最新推荐文章于 2024-09-19 21:09:22 发布

转载最新推荐文章于 2024-09-19 21:09:22 发布 · 430 阅读

本文介绍了Webpack的基本配置，包括代码分割、生产与开发环境配置、缓存策略及webpack-dev-server的使用。详细讲述了如何利用CommonsChunkPlugin、extract-text-webpack-plugin等插件进行代码优化。

写在前面：

　　贴一个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
    }