（转）webpack从零开始第6课:在Vue开发中使用webpack

vue官方已经写好一个vue-webpack模板vue_cli，原本自己写一个，发现官方写得已经够好了，自己写显得有点多余，但为了让大家熟悉webpack，决定还是一步一步从0开始写，但源文件就直接拷贝官方的

准备工作

1. 新建文件夹D:\03www2018\study\vue2017，下面根目录指的就是这个目录
2. 生成package.json， 根目录>npm init
3. 安装webpack和webpack开发服务器， 根目录>cnpm i -D webpack webpack-dev-server
4. 安装vue、vuex、vue-router，根目录>cnpm i -S vue vuex vue-router
5. 下载vue_cli的webpack模板中src这个源文件夹到根目录\src中

安装vue
D:\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

官方文档  https://vue-loader.vuejs.org/...

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.

安装和配置

官方文档:  https://webpack.js.org/loader...

D:\03www2018\study\webpack2018>cnpm i -D css-loader

{
    test: /\.css$/, loader: 'css-loader', }, 

对上面导入的css一般有两种处理，一是使用style-loader将css嵌入到html文件的style标签中，一种是单独存在一个文件中

style-loader

官方文档:  https://webpack.js.org/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