zoukankan      html  css  js  c++  java
  • [转] webpack3最新版本配置研究(五) devtool,webpack-dev-server,CommonsChunkPlugin

    devtool

    devtool是webpack中config自带的属性只要使用就可以了不用安装 
    webpack官网的解释如下 
    当 webpack 打包源代码时,可能会很难追踪到错误和警告在源代码中的原始位置。例如,如果将三个源文件(a.js, b.js 和 c.js)打包到一个 bundle(bundle.js)中,而其中一个源文件包含一个错误,那么堆栈跟踪就会简单地指向到 bundle.js。这并通常没有太多帮助,因为你可能需要准确地知道错误来自于哪个源文件。为了更容易地追踪错误和警告,JavaScript 提供了 source map 功能,将编译后的代码映射回原始源代码。如果一个错误来自于 b.js,source map 就会明确的告诉你。 
    这里写图片描述

    //webpack.config.js
    //在entry上面添加一个官方推荐的devtool:对于开发环境eval-source-map - 每个模块使用 eval() 执行,并且 SourceMap 转换为 DataUrl 后添加到 eval() 中。初始化 SourceMap 时比较慢,但是会在重构建时提供很快的速度,并且生成实际的文件。行数能够正确映射,因为会映射到原始代码中。
    //添加属性
    module.exports = {
      devtool: 'eval-source-map'
    }
    //注释掉压缩插件
    // new webpack.optimize.UglifyJsPlugin({
    //   compress: {
    //     warnings: false,
    //   },
    //   output: {
    //     comments: false,
    //   }
    // }),
    
    //测试下报错信息,测完了删除
    // index.js
    consol.log('123');

    然后编译一下会出现如下图 
    这里写图片描述 
    这里写图片描述

    webpack-dev-server

    npm install webpack-dev-server

    // package.json中script添加 
    "devServer": "webpack-dev-server --inline",
    //webpack.config.js
    const devServer = require('webpack-dev-server')
    //module
    devServer: {
        historyApiFallback:true,
        inline:true,
        contentBase: path.join(__dirname, "public"),
        compress: true,
        port: 9000
      }
     //plugin增加
     new webpack.HotModuleReplacementPlugin()

    然后运行npm run derServer可以在localhost:9000/index.html看效果,使用这个的时候不会再生成public文件夹,所有的代码都会放在内存中!

    CommonsChunkPlugin

    CommonsChunkPlugin是webpack中自带的插件直接使用即可 
    commonsChunkPlugin

    //webpack.config.js
    // 提供公共代码,plugins添加
    // 默认会把所有入口节点的公共代码提取出来,生成一个common.js
    //new webpack.optimize.CommonsChunkPlugin('common.js')
    // 只提取index节点和extract节点
    //new webpack.optimize.CommonsChunkPlugin('common.js',['index','extract'])
    //这里我们使用
    new webpack.optimize.CommonsChunkPlugin({
       name: "common",
       minChunks:2  // 最少两个入口文件js同时引用时打包
    })
    
    //将webpack.config.js中用来push到plugins的程序修改下,加上push('common');
    const htmlArray = ['index','extract'];
    htmlArray.forEach((element) => {
      const chunksArray = [element];
      if (element === 'index') {
        chunksArray.push('entry');
      }
      chunksArray.push('common');   // 公共代码打出来的包也被认为是个chunks所以可以在这里push引入
      const newPlugin = new HtmlWebpackPlugin({
        filename: element + '.html',
        template: element + '.html',   // 获取最初的html末班
        inject:  'body',          // -
        hash: true,               // 在生成的文件后面增加一个hash,防止缓存
        chunks: chunksArray
      });
      module.exports.plugins.push(newPlugin);
    });
    
    //新文件console.js
    console.log('1234567');
    
    //index.js和extract.js中增加
    require('./console.js');

    npm run webpack之后发现在common.js中有console.log(‘1234567’);而其他的index.js和extract.js就没有了,这样使得代码重用性更高,并且节省了文件更变时的带宽,还可以将多个地方要用的js打常用的包 

  • 相关阅读:
    有道翻译js解密(1)
    Python面试题之Python正则表达式re模块
    go语言从例子开始之Example4.常量
    go语言从例子开始之Example3.变量
    go语言从例子开始之Example2.类型
    go语言从例子开始之Example1.helloworld
    python模块打补丁
    gevent协程之猴子补丁带来的坑
    charles抓包小程序
    httptesting HTTP(s)接口自动化测试框架
  • 原文地址:https://www.cnblogs.com/chris-oil/p/8563598.html
Copyright © 2011-2022 走看看