webpack
webpack相关
wflynn
研究代码中...将随缘更新
展开
-
Cannot read property ‘tapPromise‘ of undefined
compression-webpack-plugin:5.1.0https://github.com/webpack-contrib/compression-webpack-plugin/releases/tag/v7.0.0原创 2021-02-18 17:27:27 · 1247 阅读 · 0 评论 -
vue inspect查看项目的webpack配置
开发环境:npx vue-cli-service inspect --mode development >> webpack.config.development.js生产环境:npx vue-cli-service inspect --mode production >> webpack.config.production.js在产生的 js 文件开头,添加:module.exports =,然后格式化即可查看。...原创 2021-03-26 14:26:09 · 1195 阅读 · 1 评论 -
webpack Develoment 和 Production 模式的区分打包
代码已上传至githubgithub代码地址:https://github.com/Miofly/mio.gitwebpack.common.jsconst merge = require('webpack-merge')const devConfig = require('./webpack.dev')const prodConfig = require('./webpack...原创 2020-05-05 10:23:28 · 213 阅读 · 0 评论 -
webpack生产、开发公共配置拆分
代码已上传至githubgithub代码地址:https://github.com/Miofly/mio.gitwebpack.common.js以下是公共配置,生产与开发环境打包时都会经过下面的配置const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const {CleanWebpackPlugin} = require('clean-webpack-plugin')c原创 2020-05-09 08:14:27 · 276 阅读 · 0 评论 -
webpack的安装与配置
创建一个空文件夹: webpack_demo 运行:npm init -f 创建 package.json文件 安装webpack: 全局安装webpacknpm install webpack webpack-cli -g查看webpack版本webpack -v卸载全局安装的webpacknpm uninstall webpack webpack-cli -g本地安装...原创 2019-11-03 11:15:54 · 125 阅读 · 0 评论 -
webpack面试题大全(持续更新)
谈谈你对webpack的看法 webpack是一个模块打包工具,可以使用它管理项目中的模块依赖,并编译输出模块所需的静态文件。它可以很好地管理、打包开发中所用到的HTML,CSS,JavaScript和静态文件(图片,字体)等,让开发更高效。对于不同类型的依赖,webpack有对应的模块加载器,而且会分析模块间的依赖关系,最后合并生成优化的静态资源。 webpack的基本功能和工作原理?...原创 2019-10-10 17:03:12 · 3074 阅读 · 0 评论 -
vue-cli详解
什么是vue-clivue-cli是vue的脚手架安装:npm install -g vue-clivue-cli搭建vue项目使用vue-cli创建vue项目:常用 vue init webpack my-project用法: vue init <template-name> <project-name>template-name: ...原创 2019-11-13 09:24:35 · 123 阅读 · 0 评论 -
webpack对css代码进行分割
npm i -D mini-css-extract-plugin // 不支持代码热更新npm i -D optimize-css-assets-webpack-plugin // 代码压缩合并mini-css-extract-plugin不支持热更新适合在线上环境使用,在webpack.prod.js配置const MiniCssExtractPlugin = require(...原创 2019-11-04 08:53:38 · 267 阅读 · 0 评论 -
webpack与浏览器缓存
output: { // 为了防止浏览器缓存加入[contenthash], // 代码改变[contenthash]才会改变,否则不会改变 filename: '[name].[contenthash].js', // 打包文件的文件名 chunkFilename: '[name].[contenthash].chunk.js',}optimization: {...原创 2019-11-04 08:53:27 · 168 阅读 · 0 评论 -
webpack的code splitting详解
代码分割Code Splitting通常来讲,我们写项目的时候可以分为两部分,一部分是引用的类库,另一部分是我们写的业务逻辑代码。这两部分打包后会合并到一个js文件中。这样方式的缺点是:一、打包生成的main.js可能会很大,首次访问时会慢二、当页面业务逻辑发生变化时,又要加载全部的内容解决方式:使用代码分割,将类库的代码打包成一个js文件,将业务逻辑代码打包成一个文件。这种方式的优...原创 2019-11-04 08:53:46 · 380 阅读 · 0 评论 -
webpack的development与production模式区分打包
安装插件:npm i -D webpack-merge将以前的webpack.config.js拆分为三个文件webpack.common.js 开发与线上共同需要配置 webpack.dev.js 开发环境下所需的配置 webpack.prod.js线上环境下所需的配置webpack.prod.jsconst merge = require('webpack-merge...原创 2019-11-04 08:53:54 · 357 阅读 · 0 评论 -
webpack之Tree Shaking详解
Tree Shaking能够在模块的层面上做到打包后的代码只包含被引用并被执行的模块,而不被引用或不被执行的模块被删除掉,以起到减包的效果。比如math.jsexport const add = (a, b) => { console.log(a + b)}export const minus = (a, b) => { console.log(...原创 2019-11-04 08:54:00 · 225 阅读 · 0 评论 -
webpack之使用babel把ES6语法转为ES5语法
安装:npm i -D babel-loader @babel/corenpm i -D babel-loader@8 // 安装版本号是8的{ test: /\.js$/, exclude: /node_modules/, // 如果js在node_modules则不使用 loader: "babel-loader", options: { // 放...原创 2019-11-03 14:32:42 · 1238 阅读 · 0 评论 -
webpack的热模块更新以及WebpackDevServer详解
// 最原始打包"scripts": { "build": "webpack"},===// 如果原文件改变,刷新后可以得到改变后的结果"scripts": { "build": "webpack --watch"},安装webpack-dev-server:npm i -D webpack-dev-serverwebpack.config.js下的配置...原创 2019-11-03 13:58:22 · 93 阅读 · 0 评论 -
webpack之sourceMap(devtool配置项)
什么是sourceMap ?sourceMap就是我们编译后的源文件映射。当使用webpack 编译前端项目时,配置项devtool控制是否生成source map。sourceMap分类内联源映射,将映射的数据之间添加在生成的文件中,在.map文件中的‘sourcesContent’字段来存放源码,加上inline 外联源映射,将映射数据存储在单独的映射文件中,使用标记将源链接到源...原创 2019-11-03 13:23:07 · 1813 阅读 · 0 评论 -
webpack入口出口配置详解
如果output没有配置filename,输出的文件名就为main.js,这个main是entry里的配置entry: { main: './src/index.js'},output: { // filename: 'bundle.js', // 打包文件的文件名 path: path.resolve(__dirname, 'dist') // __dirn...原创 2019-11-03 13:06:46 · 314 阅读 · 1 评论 -
webpack之plugin详解
npm i -D html-webpack-plugin 会在打包结束后,自动生成html文件,并把打包生成的js自动引入到这个html文件中webpack.config.js 下的配置const HtmlWebpackPlugin = require('html-webpack-plugin');// plugins可以在webpack运行到某个时刻的时候,帮你做一些事情...原创 2019-11-03 12:52:46 · 148 阅读 · 0 评论 -
webpack之loader配置
什么是Loader官方解释是文件预处理器。Loader用于对模块的源代码进行转换。webpack本身只能处理javascript的模块,所以就需要Loader来处理其他的任何类型的资源和模块。loader可以将文件从不同的语言如(TypeScript)转换为javascript,或者是将内联图像转换为dataURL,甚至可以直接在js模块中直接import引入css文件。打包图片的...原创 2019-11-03 12:34:58 · 183 阅读 · 0 评论 -
Package.json 属性说明,以及Package-lock.json文件的作用
Package.json作用package.json 文件其实就是对项目或者模块包的描述,里面包含许多元信息。比如项目名称,项目版本,项目执行入口文件,项目贡献者等等。npm install 命令会根据这个文件下载所有依赖模块。当你执行npm install的时候,node会先从package.json文件中读取所有dependencies信息,然后根据dependencies中的信息与nod...原创 2019-11-03 09:57:25 · 1032 阅读 · 0 评论