美文网首页Webpackwebpack学习
webpack4配置vue项目----3.设置mode和sour

webpack4配置vue项目----3.设置mode和sour

作者: 花拾superzay | 来源:发表于2019-11-20 10:38 被阅读0次

    这是一篇webpack4配置的系列文章,推荐从头开始看起
    1.初始化
    2.关于执行环境process.env.NODE_ENV
    3.设置mode和sourceMap
    4.加载css, scss文件,以及样式抽离
    5.加载图片等文件
    6.html-webpack-plugin插件
    7.单vue文件的加载,以及babel的使用
    8.配置devServer服务器,热更新,前端跨域代理
    9.设置目录别名
    10.css样式前缀自动补全
    11.public公共静态资源目录拷贝
    12.清理dist目录

    设置mode模式

    在webpack.config.js文件中配置mode

    module.exports = {
        mode: process.env.NODE_ENV,
    };
    

    设置sourceMap

    当 webpack 打包源代码时,可能会很难追踪到错误和警告在源代码中的原始位置。为了更容易地追踪错误和警告,JavaScript 提供了 source map 功能,将编译后的代码映射回原始源代码。可以更准确的定位到错误代码的出处。

    在webpack.config.js文件中配置devtool

    module.exports = {
        //可取值source-map,inline-source-map,inline-cheap-source-map,inline-cheap-module-source-map等等;这里使用source-map
        devtool: 'source-map',
    };
    

    打包后,你会在dist/js目录下见到类似main.js.map的文件,里面就是映射关系

    相关文章

      网友评论

        本文标题:webpack4配置vue项目----3.设置mode和sour

        本文链接:https://www.haomeiwen.com/subject/rpanictx.html