webpack配置(vue)
时间:2019-08-29
本文章向大家介绍webpack配置(vue),主要包括webpack配置(vue)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Vue-loader
Vue-loader 是一个加载器,能把 .vue 文件转换为js模块。
npm install -D vue-loader vue-template-compiler
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin()
]
}
Vue Cli
调整 webpack 配置最简单的方式就是在 vue.config.js
中的 configureWebpack
选项提供一个对象:
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
new MyAwesomeWebpackPlugin()
]
}
}
注意:有些 webpack 选项是基于 vue.config.js 中的值设置的,所以不能直接修改。
如果你需要基于环境有条件地配置行为,或者想要直接修改配置,那就换成一个函数 。
// vue.config.js
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
} else {
// 为开发环境修改配置...
}
}
}
Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的。通过这个API可以定义具名的 loader 规则和具名插件,比直接修改webpack配置有更高的自由度。
sass-loader
npm install -D sass-loader node-sass
在webpack.config.js 中配置规则
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
}
]
},
}
sass-loader 会默认处理不基于缩进的 scss 语法。为了使用基于缩进的 sass 语法,你需要向这个 loader 传递选项:
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
indentedSyntax: true
}
}
]
}
sass-loader 也支持一个 data 选项,这个选项允许你在所有被处理的文件之间共享常见的变量,而不需要显式地导入它们。
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
data: `$color: red;`
}
}
]
}
less-loader
npm install -D less less-loader
{
test: /\.less$/,
use: [
'vue-style-loader',
'css-loader',
'less-loader'
]
}
Stylus-loader
npm install -D stylus stylus-loader
{
test: /\.styl(us)?$/,
use: [
'vue-style-loader',
'css-loader',
'stylus-loader'
]
}
Babel-loader
npm install -D babel-core babel-loader
{
test: /\.js$/,
loader: 'babel-loader',
exclude: file => (
/node_modules/.test(file) &&
!/\.vue\.js/.test(file)
)
}
Babel 的配置可以通过 .babelrc 或 babel-loader 选项来完成。
有一些不需要进行打包处理的文件,可以通过使用一个排除函数将它们加入白名单。
ts-loader
npm install -D typescript ts-loader
module.exports = {
resolve: {
// 将 .ts 添加为一个可解析的扩展名。
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
loader: 'ts-loader',
options: { appendTsSuffixTo: [/\.vue$/] }
}
]
},
}
TypeScript 的配置可以通过 tsconfig.json 来完成。
ESLint
npm install -D eslint eslint-loader
module.exports = {
module: {
rules: [
{
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /node_modules/
}
]
}
}
原文地址:https://www.cnblogs.com/yaokai729/p/11432556.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 女神节 | 程序员如何低调而又不失逼格
- Flutter 拖拽控件Draggable看这一篇就够了
- 面试官:你精通多少种语言的Hello World?
- Flutter 裁剪类组件 最全总结
- Flutter Form表单控件超全总结
- 你知道吗,Flutter内置了10多种Button控件
- Flutter 日期时间DatePicker控件及国际化
- 强大的Flutter App升级功能
- 你知道吗,Flutter内置了10多种show
- 还记得第一个看到的Flutter组件吗?
- 150多个Flutter组件详细介绍送给你
- Flutter 学习路线图
- Flutter 强大的MediaQuery控件
- 基于web的图书管理系统设计与实现
- 《Flutter 动画系列一》25种动画组件超全总结