vue mianjs 引用css_vue 学习记录八——webpack中常见的配置项

在web开发中，我们得使用到js（es6）、css、html等技术，需要对资源文件管理，例如图片，同时还需要对性能、热加载等进行处理；这些功能都是可以在webpack中进行配置管理的，下面具体介绍说明。

1、devServer:在我们开发中能够自动使我们的代码即时起作用，自动帮我们刷新页面，启动服务器后能够自动打开页面，就是使用了devServer，devServer只会在内存中打包，不会进行任何的文件输出。在使用vue手脚架搭建的项目中，devServer的配置是在build/webpack.dev.conf.js中。

2、CSS：CSS配置可以集中打包在最终输出的js文件中，也可以进行打包成一个个独立的文件，可以进行压缩。CSS 开发中可能使用less、sass，相应的需要使用less-loader、sass-loader、css-loader

1）基础配置：

2)css文件单独打包：需要使用到mini-css-extract-plugin 插件；

安装mini-css-extract-plugin 插件：npm i mini-css-extract-plugin --D

引用插件：const miniCssExtractPlugin = require 'mini-css-extract-plugin'

配置插件使用：

配置CSS loader,既然使用了mini-css-extract-plugin，就不能使用style-loader 了

3）、CSS 兼容性处理,需要使用到postcss-loader，和postcss-preset-env插件

安装：npm i postcss-loader postcss-preset-env --D

loader 配置，这样就可以在生成css文件的时候不需要写自己写太多的浏览器兼容语句了，css生成的文件会自动处理的，非常的方便。

4）压缩CSS:需要使用到Optimize-css-assets-webpack-plugin 插件

安装插件：npm i optimize-css-assets-webpack-plugin --D

3、打包html资源配置,需要使用到html-webpack-plugin插件，vue 手脚架搭建的环境默认已经安装了此插件

安装：npm i HtmlWebpackPlugin --D

压缩html,配置html-webpack-plugin 项的minify配置项即可：

4、打包图片资源，使用url-loader，在vue手脚架搭建的项目中已经有默认的配置生成，

5、js 的babel 转换，在vue手脚架搭建的项目中如果选择安装babel会有相应的配置，

6、其他资源:其他资源是除了上面的配置项目外的配置，例如字体等

7、resolve 配置项：解析模块的配置项，

1）alias：配置路径别名，例如一个路径深度比较高，可以配置一个别名，在引用的时候便可以别名替代；

2）extensions：配置省略文件路径的后缀名，例如 a.js 可以在引用的时候 a 即可

8、optimization：此项必须在生产模式下进行配置

vue mianjs 引用css_vue 学习记录八——webpack中常见的配置项相关推荐

vue文件里在style的样式需要什么loader_Vue学习笔记之Webpack中css、less、图片等文件处理...
一.webpack中使用css文件: loader是webpack中一个非常核心的概念,去转化webpack不能转化或打包的文件. 安装loader: 官网介绍: 安装: cnpm install - ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
三维荧光学习记录--在Origin中绘制三维荧光光谱图（补充）及荧光区域积分（FRI）
三维荧光学习记录–在Origin中绘制三维荧光光谱图(补充)及荧光区域积分(FRI) 注:本文仅作为自己的学习记录以备以后复习查阅关于区域积分的简介,大家可以去看我之前的文章,这里就不赘述了,主要想 ...
三维荧光学习记录--在Origin中绘制三维荧光光谱图
三维荧光学习记录–在Origin中绘制三维荧光光谱图注:本文仅作为自己的学习记录以备以后复习查阅记录一下如何在Origin中绘制三维荧光光谱图(数据分析的学习之路任重而道远啊~~) 一.数据准备 ...
L1-030 一帮一 (15分) “一帮一学习小组”是中小学中常见的学习组织方式，老师把学习成绩靠前的学生跟学习成绩靠后的学生排在一组。本题就请你编写程序帮助老师自动完成这个分配工作，即在得到全班学生
L1-030 一帮一 (15分) "一帮一学习小组"是中小学中常见的学习组织方式,老师把学习成绩靠前的学生跟学习成绩靠后的学生排在一组.本题就请你编写程序帮助老师自动完成这个分配工 ...
“一帮一学习小组”是中小学中常见的学习组织方式，老师把学习成绩靠前的学生跟学习成绩靠后的学生排在一组。本题就请你编写程序帮助老师自动完成这个分配工作，即在得到全班学生的排名后，在当前尚未分组的学生中，
"一帮一学习小组"是中小学中常见的学习组织方式,老师把学习成绩靠前的学生跟学习成绩靠后的学生排在一组.本题就请你编写程序帮助老师自动完成这个分配工作,即在得到全班学生的排名后,在当 ...
L1-030——一帮一学习小组”是中小学中常见的学习组织方式，老师把学习成绩靠前的学生跟学习成绩靠后的学生排在一组。
一帮一学习小组"是中小学中常见的学习组织方式,老师把学习成绩靠前的学生跟学习成绩靠后的学生排在一组.本题就请你编写程序帮助老师自动完成这个分配工作,即在得到全班学生的排名后,在当前尚未分组的 ...
“一帮一学习小组”是中小学中常见的学习组织方式，老师把学习成绩靠前的学生跟学习成绩靠后的学生排在一组.
"一帮一学习小组"是中小学中常见的学习组织方式,老师把学习成绩靠前的学生跟学习成绩靠后的学生排在一组.本题就请你编写程序帮助老师自动完成这个分配工作,即在得到全班学生的排名后,在当 ...
webpack中常见loader的作用和使用方法
webpack中常见的loader有哪些?它们的作用是什么呢? 之前我们有说到,webpack默认情况下只认识.js结尾的文件,要打包其它类型的文件,则我们需要在webpack.config.js文件 ...

vue mianjs 引用css_vue 学习记录八——webpack中常见的配置项

vue mianjs 引用css_vue 学习记录八——webpack中常见的配置项相关推荐

最新文章

热门文章