随笔分类 - webpack
摘要：1、threads.js基本使用 1.1 使用vue-cli创建一个项目（我这里vue --version的版本是3.11.0）： vue create hello-world 1.2 添加tool.js文件： export function getSuffix() { return new Dat
阅读全文
摘要：前言: webpack中的require解析 首先明确一点，在项目中的webpack.config.js等项目配置文件中使用的require属于nodejs范畴，而进入index.js后，加载的组件中的require都属于webpack的解析范畴。 webpack中require的用法： let u
阅读全文
摘要：1. file-loader // index.js import doggy from 'doggy.jpg' console.log(doggy) // webpack.config.js module.exports = { // 省略其他配置项 module: { rules: [{ tes
阅读全文
摘要：CSS3 的属性为什么需要前缀 浏览器的标准没有完全统一 举个栗子： .box { display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex } PostCSS 插件 autoprefixer 自动补齐
阅读全文
摘要：1.mode webpack增加了一个mode配置，只有两种值development | production。对不同的环境他会启用不同的配置。 webpack4中通过内置的mode使用相应模式的内置优化。比如设置mode等于'development'，会将 process.env.NODE_ENV
阅读全文
摘要：webpack是一个模块打包器（module bundler），提供了一个核心，核心提供了很多开箱即用的功能，同时它可以用loader和plugin来扩展。webpack本身结构精巧，基于tapable的插件架构，扩展性强，众多的loader或者plugin让webpack显得很复杂。webpack
阅读全文
摘要：1.config/index.js文件 开发环境： 生产环境： 2.webpack.prod.conf.js文件 注释掉的UglifyJsPlugin（或者terser-webpack-plugin）用于js打包、压缩、混淆 3.打包结果多一个map文件
阅读全文
摘要：原因： webPack 升级到 4.x导致extract-text-webpack-plugin 无法使用。 解决办法： new ExtractTextPlugin({ filename: [name]_[md5:contenthash:hex:8].css, }), 转自：https://blog
阅读全文
摘要：WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development'
阅读全文
摘要：terser 由于老牌工具uglify不支持es6，且uglify-es不再更新，我们选择terser作为js代码压缩工具。 # 全局安装terser命令行工具 npm install -g terser # 使用terser terser ./foo.js -c pure_funcs=[conso
阅读全文
摘要：这个选项决定了 script 标签的引用顺序。默认有四个选项，'none', 'auto', 'dependency', '{function}'。 'dependency' 按照不同文件的依赖关系来排序。 'auto' 默认值 'none' {function} 不懂 'dependency' 按
阅读全文
摘要：根本原因：是项目在升级了webpack到v4.0.0后，打包生产环境文件，报错走不下去。CommonsChunkPlugin主要是用来提取第三方库和公共模块，避免首屏加载的bundle文件或者按需加载的bundle文件体积过大，从而导致加载时间过长，着实是优化的一把利器。 解决办法 build/we
阅读全文
摘要：解决方案如下： npm install extract-text-webpack-plugin@next 安装后的版本是（package.json）： "devDependencies": { "css-loader": "^0.28.11", "extract-text-webpack-plugi
阅读全文
vue-loader加载不上报错* ./node_modules/vue-loader/lib/index.js You may need an additional loader to handle
摘要：根本原因：最新的vue-loader 15+以上，要求使用vueloaderplugin，需要变更webpack配置文件 一、报错代码： ERROR in ./src/login.vue?vue&type=template&id=19e76240& 2:0 Module parse failed:
阅读全文
摘要：根本原因是exports和import不兼容引起的。 问题解析 require 和 module.exports 是commonjs 规范，适用于 nodejs 环境 import 和 export 是ES6规范，适用于浏览器 因此import 不能和 module.exports 混合使用 很多文
阅读全文
摘要：使用npm 安装相应的模块 webpack 4 需要安装 webpack、webpack-cli 和 typescript 等必要的模块。为了使用 webpack 处理 typescript，还需要 ts-loader。在VSCode的终端输入以下命令 1、初始化项目： npm init 回答一系列
阅读全文
摘要：转自：https://www.cnblogs.com/y896926473/articles/6011711.html 官网：https://www.webpackjs.com/concepts/ 1. webpack简介 webpack 是一个模块打包工具。它使得模块相互依赖并且可构建等价于这些模
阅读全文
