![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
wabpack
文章平均质量分 58
V5521
这个作者很懒,什么都没留下…
展开
-
07_webpack 打包体积分析
webpack打包分析 安装 webpack-bundle-analyzer yarn add webpack-bundle-analyzer -D webpack配置 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.exports = { plugins: [ new BundleAnalyzerPlugin() ] } Vue中如何使用 需要在vu原创 2021-08-06 11:18:44 · 267 阅读 · 0 评论 -
06_weboack vue开发环境配置
webpack配置基础vue开发环境 在vuecli中,可以去定义webpack的配置,在 vue.config.js 中配置chainWebpack 文档 如何自己配置一个vue开发环境 识别vue文件需要安装以下模块 yarn add vue-loader vue-template-compiler -D webpack.config.js module.exports = { entry: "./src/main.js", output: { filename: "app.[hash原创 2021-08-06 11:18:27 · 87 阅读 · 0 评论 -
05_webpack devserver模式
webpack devserver 在进行开发的过程中,我们需要让代码修改后自动更新页面,因此需要设置对应的devServer 安装webpack-dev-server yarn add webpack-dev-server -D 配置 module.exports = { ..., devServer: { contentBase: path.join(__dirname, 'dist'), compress: true, port: 9000 } } 配置启动脚本原创 2021-08-06 11:17:41 · 69 阅读 · 0 评论 -
04_webpack插件的用法
webpack plugin (插件) 插件给webpack提供了很多方便的功能,在进行打包时,利用插件可以解决我们的很多问题 插件就是普通的nodejs模块,所以使用插件时需要下载,并且在 webpack.config.js 中引入 如何使用插件 // 具体如何引入需要看对应插件的文档 const 插件 = require("插件模块") module.exports = { entry: "", output: { filename: "", path }, plug原创 2021-08-06 11:16:41 · 80 阅读 · 0 评论 -
03_webpack loader的作用
loader 默认webpack只支持js模块,但是webpack打造的概念是“一切皆模块”,想要实现这个概念,就需要使用loader,如果我们引入了weback不支持的模块,则会在打包时报错。 因此,我们需要安装相关的loader来解决这些问题 module.exports = { ..., module: { rules: [ { test: /\.后缀$/, use: "xxx-loader", // 如果loader需要原创 2021-08-06 11:15:57 · 77 阅读 · 0 评论 -
02_webpack命令
webpack命令 wabpack基本概念 想要有webpack命令,那么我们需要全局安装,但是!!!!如果全局安装无法适应所有的项目,那么我们就可以只在项目中安装,利用package.json中scripts调用对应命令 因此,我们要在对应的项目中进行安装 npm i webpack --save-dev # 或者 yarn add webpack -D 同时需要安装 webpack-cli 如果没有安装则自动提示,建议在安装webpack时,同时安装webpack-cli,使用下面命令即可 npm i原创 2021-08-06 11:15:01 · 79 阅读 · 0 评论 -
01 webpack基本概念
webpack Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。 Webpack改变的是前端的开发模式,使前端可以进行模块化开发,基于ESModule。现在主流的框架开发都基于webpack。 entry 入口文件设置,只有和入口文件产生模块关联,最终才能被webpack打包 module.exports = { // 单入口写法 entry: "./src/main.js", // 多入口数组写法 entr原创 2021-08-06 11:12:04 · 117 阅读 · 0 评论