webpack
九段刀客
你期待的并且相信的,终将实现!
展开
-
webpack学习笔记十:配置typescript
安装ts依赖 typescript:ts的核心 ts-loader:将.ts文件,.vue中的ts代码转化成js代码 npm install typescript ts-loader --save-dev webpack.config.js中的配置 添加对ts代码的解析 module:{ { test: /\.ts$/, loader: "ts-loader", options: { appendTsSuffixTo: [/\.vue$/] }, }, } shims-vue.d.t原创 2020-10-19 17:57:55 · 357 阅读 · 0 评论 -
webpack学习笔记九:添加css预处理sass
安装依赖 因为yarn异常问题比npm要少一些,所有改用yarn了,如果没有yarn可以用npm全局安装npm install yarn -g,sass有两种dart-sass和node-sass,dart-sass是sass的一个新版本,而且不会出现node-sass依赖安装不上的坑。使用时唯一的区别是样式穿透时node-sass中使用/deep/,二dart-sass中使用::v-deep yarn add sass sass-loader --save 配置 // 生成HTML const Html原创 2020-10-13 11:00:57 · 232 阅读 · 0 评论 -
webpack学习笔记八:实现一个vue脚手架
安装依赖 可以到vue的官网中查看Vue Loader部分文档https://vue-loader.vuejs.org/zh/guide/#vue-cli cnpm install -D vue-loader vue-template-compiler 配置 1、 在插件中添加vue-loader 2、在加载器中添加.vue文件的解析 3、生成HTML指定了一个模板HTML文件 4、man.js中引入了app.vue webpack.config.js // 生成HTML const HtmlWebp原创 2020-10-08 22:10:29 · 208 阅读 · 0 评论 -
webpack学习笔记七:配置babel
安装依赖 babel-loader 该软件包允许使用Babel和webpack转换JavaScript文件。文档地址 @babel/core Babel的核心,各种转换的方法都写在这里 官方文档地址 @babel/preset-env 智能的编译js,只需要指定你要支持的浏览器范围,就可以智能的编译。 官方文档地址 cnpm install -D babel-loader @babel/core @babel/preset-env 配置文件 在加载器中添加了对babel的处理 // 生成HTML co原创 2020-10-08 15:27:23 · 673 阅读 · 0 评论 -
webpack学习笔记六:分离出css代码
注意:webpack4版本中已经弃用extract-text-webpack-plugin插件来提取css了而采用mini-css-extract-plugin。 安装依赖,还是推荐cnpm安装吧,npm总是会出点问题 cnpm install mini-css-extract-plugin --save-dev webpack.config.js // 生成HTML const HtmlWebpackPlugin = require("html-webpack-plugin"); // 清空文件夹 c原创 2020-10-08 12:14:32 · 248 阅读 · 0 评论 -
webpack --env.production和--mode =“ production”有什么区别
在webpack.config.js中判断环境的时候要使用函数的方式导出, "scripts": { "serve": "webpack-dev-server --mode development --progress --open", "build": "webpack --env.production --mode production --progress" }, module.exports = function (env, argv) { console.log(env, argv)原创 2020-10-04 22:34:16 · 2990 阅读 · 0 评论 -
webpack学习笔记五:代码分离和动态引入,提取共享模块
介绍 代码分离就是将不同功能的代码打包成不同的文件,以控制代码加载的优先级,实现按需加载,可以实现优化首屏加载速度。webpack文档中使用了三种方法,分别是入口起点,防止重复,动态引入;前两种方法需要在入口处配置共享文件,如果是大型项目感觉配置起来会很麻烦,所有我这里只介绍动态引入。一般推荐是比较大的依赖文件时使用此方法比如xlsx.js文件 配置 在webpack.config.js中output属性下添加chunkFilename: "[name].bundle.js", const HtmlWebp原创 2020-09-30 14:51:47 · 481 阅读 · 0 评论 -
webpack学习笔记四:自动生成HTML和清理dist
安装依赖 install html-webpack-plugin -D 配置webpack.config.js const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { mode: "development", entry: { main: "./src/main.js", test: "./src/js/test.js", }, plugins: [ // 生成HTML文件 new H原创 2020-09-30 10:46:53 · 279 阅读 · 0 评论 -
webpack学习笔记三:实现加载CSS、image图片、fonts字体
加载css 安装依赖 npm install --save-dev style-loader css-loader 配置文件,webpack.config.js中 module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader', ], }, ], }, 加载图片image,和字体fonts 安装依赖 npm install --save-dev file-l原创 2020-09-29 17:32:14 · 218 阅读 · 0 评论 -
webpack学习笔记二:实现自动编译预览
webpack.config.js中添加环境 module.exports = { mode: 'development', entry: "./src/main.js", output: { path: `${__dirname}/dist`, filename: "bundle.js", }, devServer:{ contentVase:`${__dirname}/dist`, compress:true, prot原创 2020-09-29 11:37:09 · 185 阅读 · 0 评论