qq5945ef689245b的博客_webpack

json

github

文件名

原创 2022-10-13 17:02:42 67 阅读

webpack生产、开发公共配置拆分

代码已上传至githubgithub代码地址：https://github.com/Miofly/mio.gitwebp

css

html

开发环境

原创 2022-10-13 17:02:38 69 阅读

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(...

css

热更新

模块化

原创 2022-10-13 16:57:24 92 阅读

webpack之plugin详解

npm i -D html-webpack-plugin 会在打包结束后，自动生成html文件，并把打包生成的js自动引入到这个html文件中webpack.config.js 下的配置const HtmlWebpackPlugin = require('html-webpack-plugin');// plugins可以在webpack运行到某个时刻的时候，帮你做一些事情...

html

html模板

自动生成

原创 2022-10-13 16:57:21 48 阅读

Package.json 属性说明，以及Package-lock.json文件的作用

Package.json作用package.json 文件其实就是对项目或者模块包的描述，里面包含许多元信息。比如项目名称，

json

版本号

加载

原创 2022-10-13 16:55:25 146 阅读

webpack的安装与配置

创建一个空文件夹： webpack_demo 运行：npm init -f 创建 package.json文件安装webpack: 全局安装webpacknpm install webpack webpack-cli -g查看webpack版本webpack -v卸载全局安装的webpacknpm uninstall webpack webpack-cli -g本地安装...

json

当前路径

配置文件

原创 2022-10-13 16:55:20 70 阅读

webpack与浏览器缓存

output: { // 为了防止浏览器缓存加入[contenthash], // 代码改变[contenthash]才会改变，否则不会改变 filename: '[name].[contenthash].js', // 打包文件的文件名 chunkFilename: '[name].[contenthash].chunk.js',}optimization: {...

文件名

js代码

浏览器缓存

原创 2022-10-13 16:55:16 61 阅读

webpack入口出口配置详解

如果output没有配置filename，输出的文件名就为main.js，这个main是entry里的配置entry: { main: './src/index.js'},output: { // filename: 'bundle.js', // 打包文件的文件名 path: path.resolve(__dirname, 'dist') // __dirn...

文件名

当前路径

html

原创 2022-10-13 16:55:13 60 阅读

webpack的热模块更新以及WebpackDevServer详解

// 最原始打包"scripts": { "build": "webpack"},===// 如果原文件改变，刷新后可以得到改变后的结果"scripts": { "build": "webpack --watch"},安装webpack-dev-server：npm i -D webpack-dev-serverwebpack.config.js下的配置...

web服务器

json

原创 2022-10-13 16:55:10 52 阅读

webpack之sourceMap（devtool配置项）

什么是sourceMap ?sourceMap就是我们编译后的源文件映射。当使用webpack 编译前端项目时，配置项devtool控制是否生成source map。sourceMap分类内联源映射，将映射的数据之间添加在生成的文件中，在.map文件中的‘sourcesContent’字段来存放源码,加上inline 外联源映射，将映射数据存储在单独的映射文件中，使用标记将源链接到源...

生产环境

开发环境

配置项

原创 2022-10-13 16:55:06 244 阅读

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: { // 放...

chrome

版本号

主目录

原创 2022-10-13 16:55:03 270 阅读

webpack之Tree Shaking详解

Tree Shaking能够在模块的层面上做到打包后的代码只包含被引用并被执行的模块，而不被引用或不被执行的模块被删除掉，以起到减包的效果。比如math.jsexport const add = (a, b) => { console.log(a + b)}export const minus = (a, b) => { console.log(...

加载

ide

css

原创 2022-10-13 16:54:59 105 阅读

webpack的code splitting详解

代码分割Code Splitting通常来讲，我们写项目的时候可以分为两部分，一部分是引用的类库，另一部分是我们写的业务逻辑代码。这两部分打包后会合并到一个js文件中。这样方式的缺点是：一、打包生成的main.js可能会很大，首次访问时会慢二、当页面业务逻辑发生变化时，又要加载全部的内容解决方式：使用代码分割，将类库的代码打包成一个js文件，将业务逻辑代码打包成一个文件。这种方式的优...

加载

业务逻辑

缓存

原创 2022-10-13 16:54:56 85 阅读

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...

开发环境

html

生产环境

原创 2022-10-13 16:54:51 59 阅读

webpack之loader配置

什么是Loader官方解释是文件预处理器。Loader用于对模块的源代码进行转换。webpack本身只能处理javascript的模块，所以就需要Loader来处理其他的任何类型的资源和模块。loader可以将文件从不同的语言如（TypeScript）转换为javascript,或者是将内联图像转换为dataURL，甚至可以直接在js模块中直接import引入css文件。打包图片的...

css

后缀

加载

原创 2022-10-13 16:54:37 367 阅读

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: ...

git

环境配置

css

原创 2022-10-13 16:50:31 425 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

13018258

欢迎

webpack Develoment 和 Production 模式的区分打包

webpack生产、开发公共配置拆分

webpack对css代码进行分割

webpack之plugin详解

Package.json 属性说明，以及Package-lock.json文件的作用

webpack的安装与配置

webpack与浏览器缓存

webpack入口出口配置详解

webpack的热模块更新以及WebpackDevServer详解

webpack之sourceMap（devtool配置项）

webpack之使用babel把ES6语法转为ES5语法

webpack之Tree Shaking详解

webpack的code splitting详解

webpack的development与production模式区分打包

webpack之loader配置

vue-cli详解