（轉）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