(转)webpack从零开始第6课:在Vue开发中使用webpack
vue官方已经写好一个vue-webpack模板vue_cli,原本自己写一个,发现官方写得已经够好了,自己写显得有点多余,但为了让大家熟悉webpack,决定还是一步一步从0开始写,但源文件就直接拷贝官方的
准备工作
- 新建文件夹
D:\03www2018\study\vue2017
,下面根目录
指的就是这个目录 - 生成package.json,
根目录>npm init
- 安装webpack和webpack开发服务器,
根目录>cnpm i -D webpack webpack-dev-server
- 安装vue、vuex、vue-router,
根目录>cnpm i -S vue vuex vue-router
- 下载vue_cli的webpack模板中src这个源文件夹到
根目录\src
中
安装vueD:\03www2018\study\webpack2018>cnpm i vue -S
如果有下面的报错
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)
解释: 运行时构建不包含模板编译器,因此不支持 template 选项,只能用 render 选项,但即使使用运行时构建,在单文件组件中也依然可以写模板,因为单文件组件的模板会在构建时预编译为 render 函数
修改 D:/03www2018/study/webpack2018/build/webpackfile.js
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
},
最简单的例子
D:\03www2018\study\webpack2018\today\wang\home.js
import Vue from 'vue';
const app = new Vue({
template: '<div>hello wolr</div>'
}).$mount('#main')
导入第一个vue组件
// D:\03www2018\study\webpack2018\today\wang\home.js
import App from "./app.vue"
import Vue from 'vue';
const app = new Vue({
template: '<App />',
components:{App}
}).$mount('#main')
// D:\03www2018\study\webpack2018\today\wang\App.vue
<template>
<div>上午好</div>
</template>
报错
Uncaught Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
安装并配置 vue-loader
D:\03www2018\study\webpack2018>cnpm i vue-loader -D
提示要安装css-loader和vue-template-compiler,现在将这两个也一起安装
D:\03www2018\study\webpack2018>cnpm i css-loader vue-template-compiler -D
现在就可以正常显示vue组件
处理css文件
// D:\03www2018\study\webpack2018\today\wang\app.css
body{
color:#09f;
}
处理单独的css文件
没有装css-loader会报错
ERROR in ./today/wang/app.css
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
安装和配置
D:\03www2018\study\webpack2018>cnpm i -D css-loader
{
test: /\.css$/,
loader: 'css-loader',
},
对上面导入的css一般有两种处理,一是使用style-loader将css嵌入到html文件的style标签中,一种是单独存在一个文件中
style-loader
D:\03www2018\study\webpack2018>cnpm i style-loader -D
{
test: /\.css$/,
loader: 'style-loader!css-loader',
},
多个loader是从右到左执行,多个loader之间用!连接,上面多个loader也可以写在数组的形式
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
这种写法是,从下到上执行,先执行css-loader再执行style-loader
将css文件单独打包到一个文件
这要使用到ExtractTextWebpackPlugin插件
处理less/sass等文件
这要用到less-loader或sass-loader,同时得安装less或sass,如果没安装会报错
[Vue warn]: Error in beforeCreate hook: "Error: Cannot find module "!!vue-loader/node_modules/vue-style-loader!css-loader!../../node_modules/_vue-loader@13.6.0@vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-381730fa","scoped":false,"hasInlineConfig":false}!less-loader!../../node_modules/_vue-loader@13.6.0@vue-loader/lib/selector?type=styles&index=0&bustCache!./app.vue""
ave组件的内容
<template>
<div class='morning'>上午好</div>
</template>
<style lang='less'>
@color:#f96;
.morning{
color:@color
}
</style>
安装less和less-loader
D:\03www2018\study\webpack2018>cnpm i -D less less-loader
配置
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
// fallback: "style-loader", //备用,如果提取不成功时,会使用style-loader来处理css
use: "css-loader"
})
/*use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]*/
},
{
test: /\.less$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "less-loader" // compiles Less to CSS
}
]
},
上面这个例子,只有导入的css文件单单独存在一个文件中,vue组件中的less归到了style中了,
说明:在vue组件<style>中,如果lang="less",在vue-loader中默认配置好了less,无须另外配置
说明: 上面例子是配置的是单独的less文件,不适合uve中的less
说明:如何将vue中的less也放到单独的css文件中呢? 参考https://vue-loader.vuejs.org/...
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
extractCSS: true
}
}
但上面有个缺点,会覆盖之前css中的配置中生成style.css文件,如何解决呢?
const path = require('path');
const webpack = require('webpack')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractCSS = new ExtractTextPlugin('css/[name]-one.css');
const extractLESS = new ExtractTextPlugin('css/[name]-two.css');
module.exports={
plugins: [
extractCSS,
extractLESS
],
module: {
rules: [
{
test: /\.css$/,
use: extractCSS.extract({
// fallback: "style-loader", //备用,如果提取不成功时,会使用style-loader来处理css
use: "css-loader"
})
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
// extractCSS: true
extractCSS: function(){
return extractLESS
}
}
}
]
},
}
导入图片
// D:\03www2018\study\webpack2018\today\wang\App.vue中增加图片
<template>
<div class='morning'>
<img src="../images/logo.jpg" />
<img src="../images/a.jpg" />
上午好
</div>
</template>
<style lang='less'>
@color:#f96;
.morning{
color:@color
}
</style>
如果安装并配置好了url-loader,图片会生成data:image格式
发现生成<img src="data:image/jpeg;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICIzNDk0NWM0MDMyMWQyMDk3YTY5Zjg2MGZkNWQ1M2FlZC5qcGciOw==">
,但是不显示出图片,url-loader不配置会显示图片,显示如下<img src="34945c40321d2097a69f860fd5d53aed.jpg">
安装
D:03www2018studywebpack2018>cnpm i url-loader -D
安装
D:03www2018studywebpack2018>cnpm i file-loader -D
最新文章
- 我的CS考研路
- jQuery ajax的traditional参数的作用///////////////////////////////////zzzzzzzzzzz
- 【原创】解决jquery在ie中不能解析字符串类型xml结构的xml字符串的问题
- Tomcat抛出异常:ClientAbortException: java.net.SocketException: Connection
- 转学步园:jquery offset
- vue中几种常见技巧
- SSAS 后端数据库访问模块中存在错误。 为绑定指定的大小太小,导致一个或多个列值被截断。
- nginx(二)支持websocket配置
- Day 1: ASP.NET and JavaScript Jan.16th Trying
- python环境问题(pycharm)
- jquery选择器和基本操作
- (C#)找的winform窗体自适应类
- Flash:彻底理解crossdomain.xml、跨swf调用。
- linux 下nginx安装
- [Oracle] decode 函数及其用法
- charles手机抓包配置-2
- BZOJ5016 Snoi2017一个简单的询问(莫队)
- BZOJ4869:[SHOI2017]相逢是问候——题解
- JavaEE初始化时静态代码块加载问题
- cocos2d-x 3.0游戏实例学习笔记 《跑酷》 第三步---主角开跑&;amp;同一时候带着刚体
热门文章
- kmp板子
- POJ 3126 Prime Path (BFS + 素数筛)
- dup、文件锁、库函数、函数调用(day07)
- Qt5.11+opencv3.4的配置安装
- 松哥整理了 15 道 Spring Boot 高频面试题,看完当面霸
- C#关键字的个人理解与注释
- git 强制pull
- jQuery中的closest()和parents()的差别
- hdu4762Cut the Cake(概率+大数操作(java)+C++高精度模板)
- js导出table中的EXCEL总结