webpack各配置详解

enrecul101 发布于2019-08-23 11:41 / 2070人阅读

摘要：配置一些开发环境的提示工具例如当项目中报错可以准确的定位到哪个文件报错对比项构建速度重新构建速度代码提示定位原始源代码生成后的代码可根据场景使用这两个值调试代码项目中配置引入文件的快捷路径中导出的对象内配置快捷方式名对应的路

devtool: 配置一些开发环境的提示工具

例如: devtool: "cheap-module-eval-source-map" 当项目中报错可以准确的定位到哪个文件报错

对比项	构建速度	重新构建速度	代码提示定位
cheap-module-eval-source-map	+	++	原始源代码
eval	+++	+++	webpack生成后的代码

可根据场景使用这两个值调试代码

alias: 项目中配置引入文件的快捷路径

 webpack.config.js中导出的alias对象内配置   key ——> 快捷方式名   value ——> 对应的路径
 如要配置web -> page这个文件夹的快捷方式    page: "app/web/page"

dll: 引入一些不会经常更新的第三方库，只要其包含的库没有增减、升级, 线上的dll代码不会随着版本发布频繁更新,不需要重新打包

dll: ["vue", "axios"] 这样使用即可

loaders: 配置一些项目需要使用自动转换的语法

例如： typescript: true ==> 项目中可以使用ts

或者：

    scss: {
        options: {
            includePaths: [path.resolve(_dirname, "app/web/asset"), path.resolve(_dirname, "app/web/asset/style")],
        },
      }

可以转换静态资源asset下的scss文件

另一种写法:

    {
        test:/.css$/,
        loader: "style!css"
    }

这里面的!用以webpack处理css文件时使用css-loader兼style-loader
!加了之后文件处理是自右向左，即先使用css-loader然后进行style-loader处理

url-loader可将图片转换成base64编码

plugin: 使用一些插件完成一些功能

例如: CommonsChunkPlugin 提取块之间共享的公共模块

performance: 设置一些性能监测

例如: key ——> hints value ——> "warning"
将展示一条警告，通知你这是体积大的资源

webpack中 devServer选项改项目运行端口

    devServer: {
        host: "127.0.0.1",
        port: 3000
    }

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97324.html

库，组件，框架 - 收藏集 - 掘金

摘要：哈哈，我理解，架构就是骨架，如下图所示译年月个有趣的和库前端掘金我们创办的使命是让你及时的了解开发中最新最酷的趋势。翻译 | 上手 Webpack ? 这篇就够了！ - 掘金译者：小 boy （沪江前端开发工程师）本文原创，转载请注明作者及出处。原文地址：https://www.smashingmagazine.... JavaSrip... 读 Zepto 源码之代码结构 - ...

tommego 2019-08-20 16:33 评论0 收藏0
webpack多页应用架构系列（十三）：构建一个简单的模板布局系统

摘要：原文地址如果您对本系列文章感兴趣，欢迎关注订阅这里前言上文多页应用架构系列十二利用生成普通网页页面模板我们基本上已经搞清楚如何利用来生成普通网页页面模板，本文将以我的脚手架项目介绍如何在这基础上搭建一套简单的模板布局系统。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000007...

yedf 2019-08-20 11:36 评论0 收藏0
webpack详解

摘要：但也是最复杂的一个。中当一旦某个返回值结果不为便结束执行列表中的插件中上一个插件执行结果当作下一个插件的入参调用并行执行插件流程篇本文关于的流程讲解是基于的。 webpack是现代前端开发中最火的模块打包工具，只需要通过简单的配置，便可以完成模块的加载和打包。那它是怎么做到通过对一些插件的配置，便可以轻松实现对代码的构建呢？ webpack的配置 const path = requir...

lcodecorex 2019-08-22 15:18 评论0 收藏0
[js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上

摘要：接着上文，重新在文件夹下面新建一个项目文件夹，然后用初始化项目的配置文件，然后安装，然后创建基本的项目文件夹结构，好了，我们的又一个基本项目结构就搭建好了第一开始通过文件配置我们的项目首先在项目文件夹下面，新建一个文件，这个文件可接着上文，重新在webpack文件夹下面新建一个项目文件夹demo2，然后用npm init --yes初始化项目的package.json配置文件，然后安...

moven_j 2019-08-21 16:27 评论0 收藏0