webpack+vue起步

時間 2019-11-25

標籤 webpack+vue webpack vue 起步简体版

原文原文鏈接

本文基於`vue1.x`

基於`vue2.x&webpack2.x`請移步至

記得第一次知道Vue.js是在勾三股四大大的微博，那時候他開始翻譯vue的文檔，從那時候開始到如今，看了幾回vue的教程，每次都有更深的理解，由於以前並無研究過angular等框架，因此對MVVM並非很瞭解，可是通過這段時間對vuejs的一些研究，愈來愈懂了，這篇文章，只是對vuejs和webpack配合的很是基礎的文章，我想隨着我對vue的深刻理解，會對組件化，模塊化，MVVM有更深刻的理解。php

項目的建立

1.新建項目文件夾，並在其中創建package.jsoncss

$ mkdir [project name]
$ cd [project name]
$ npm init

2.在項目目錄下新建index.htmlhtml

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue example</title> </head> <body> <div>{{message}}</div> <script src="dist/build.js"></script> </body> </html>

src文件夾，並在該文件夾下創建main.jsvue

import Vue from 'vue' new Vue({ el:'body', data:{ message:'test success!' } });

設置webpack

1.安裝webpack，webpack-dev-server以及相關的loaders

# 全局安裝webpack，webpack-dev-server $ npm install -g webpack $ npm install -g webpack-dev-server # 爲項目安裝其餘依賴 $ npm i webpack-merge css-loader style-loader file-loader url-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue vue-loader vue-html-loader vue-style-loader vue-hot-reload-api -D

webpack-merge：開發環境和生產環節的webpaak配置文件的配置合併 
css-loader：編譯寫入css 
style-loader：把編譯後的css整合進html 
file-loader：編譯寫入文件，默認狀況下生成文件的文件名是文件名與MD5哈希值的組合 
vue：vue主程序 
vue-laoder：編譯寫入.vue文件 
vue-html-loader：編譯vue的template部分 
vue-style-loader：編譯vue的樣式部分 
vue-hot-reload-api：webpack對vue實現熱替換 
babel-core：ES2015編譯核心 
babel-loader：編譯寫入ES2015文檔 
babel-preset-es2015：ES2015語法 
babel-preset-stage-0：開啓測試功能 
babel-runtime：babel執行環境 java

url-loader

這裏介紹下url-loader，這個loader其實是對file-loader的封裝https://github.com/webpack/url-loader
好比CSS文件中有時候會這麼寫：node

.demo{ background-image: url('a.png'); }

module:{ loaders:[ {test:/\.(png|jpg)$/,loader:'url-loader?limit=8192'} ] }

通過以上配置，當a.png小於8K就會自動將圖片轉換成base64編碼，若是不小於，則不會轉換。
這裏順便提一句，在module配置的時候，loader的寫法：webpack

module:{ loaders:[ {test:/\.jade$/,loader:'jade'} //這裏配置了讓webpack識別jade的loader，其餘相似，好比.vue //用於css文件的loader有兩種寫法 {test:/\.css$/,loader:'style!css'} {test:/\.css$/,loaders:['style','css']} ] }

2.配置`webpack.config.js`

在根目錄下創建webpack.config.js，配置以下：git

var path = require('path'); module.exports = { entry: './src/main.js', //定義webpack輸出的文件，咱們在這裏設置了 讓打包後生成的文件放在dist文件夾下的build.js文件中 output: { path: './dist', publicPath:'dist/', filename: 'build.js' }, module: { loaders: [ //轉化ES6語法 { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }, //圖片轉化，小於8K自動轉化爲base64的編碼 { test: /\.(png|jpg|gif)$/, loader:'url-loader?limit=8192' } ] }, //這裏用於安裝babel，若是在根目錄下的.babelrc配置了，這裏就不寫了 babel: { presets: ['es2015','stage-0'], plugins: ['transform-runtime'] } }

特別說明
若是要在.babelrc下配置babel，則須要在根目錄下新建該文件，windows環境下，不能新建該txt文件而後改後綴，須要經過dos命令創建：es6

echo>.babelrc

經過該命令就能夠創建babelde配置文件，用編輯器打開，修改裏面的內容爲：

{
  "presets": ["es2015", "stage-0"], "plugins": ["transform-runtime"] }

完成該配置咱們在命令中運行

$ webpack

打開index.html就能夠看到瀏覽器中看到咱們剛剛寫的文字
至此咱們實現了最基本的利用webpack打包vue，下一篇將講解如何利用webpack+vue真正實現組件化。

本地安裝npm包後如何在命令行運行

在npm安裝包的時候，若是使用全局安裝，即npm install <packageName> -g，則在安裝完成後能夠在終端運行做爲命令去運行，可是若是是本地安裝的包npm install --save-dev <packageName>，則沒法這樣直接運行。那麼如何運行本地安裝的包呢？首先進入項目目錄（即package.json所在目錄），而後使用如下命令便可運行：

$ node_modules/.bin/<packageName>

除了能夠這樣在命令行運行外，還能夠在文件中運行

//index.js let webpack = require('webpack'); webpack();

$ node index.js

webpack1.x升級2.x

1.`module.loaders`改爲了`module.rules`

舊的loaders被新的rules取代，後者容許配置loader以及其餘更多項。

module: { - loaders: [ + rules: [ { test: /\.css$/, - loaders: [ + use: [ { loader: "style-loader" }, { loader: "css-loader", - query: { + options: { modules: true } ] }, { test: /\.jsx$/, loader: "babel-loader", // Do not use "use" here options: { // ... } } ] }

以上寫法中，Rule.loader是Rule.use: [ { loader } ]的簡寫。

2.鏈式調用loaders

在webpack1.x中loaders能夠鏈式調用，在2.x中依舊有該特性，使用rule.use配置項，use中設置一個loaders的數組而在1.x中使用!鏈接各個loader，舊版寫法只有在使用舊的module.loaders時有效。

module: { - loaders: { + rules: { test: /\.less$/, - loader: "style-loader!css-loader!less-loader" + use: [ + "style-loader", + "css-loader", + "less-loader" + ] } }

3.取消在模塊中自動添加`-loader`後綴

webpack2.x中再也不添加-loader

module: { rules: [ { use: [ - "style", + "style-loader", - "css", + "css-loader", - "less", + "less-loader", ] } ] }

根據官方說法，作出這樣更改的緣由是省略-loader會對新手形成誤解，因此去掉這個功能，若是想打開這個舊的功能，能夠配置resolveLoader.moduleExtensions，可是並不推薦這麼作，具體參閱issues#2986

+ resolveLoader: {
+   moduleExtensions: ["-loader"] + }

4.使用options配置loader

在webpack1.x中能夠經過webpack.config.js的自定義屬性來配置loader，這在webpack2.x中沒法執行

module.exports = { ... module: { use: [{ test: /\.tsx?$/, loader: 'ts-loader' }] }, // does not work with webpack 2 ts: { transpileOnly: false } } //webpack2 use options module.exports = { ... module: { use: [{ test: /\.tsx?$/, loader: 'ts-loader' options: { transpileOnly: false } }] } }

webpack插件的使用

webpack-dev-server1.x升級2.x

1.在CLI使用的時候，--inline默認開啓，無需在輸入命令時添加

2.刪除contentBase用proxy代替

3.減小控制檯無用輸出，在1.x中，當咱們停掉服務器後，控制檯會一直輸出錯誤信息，可是在2.x中只會輸出[WDS] Disconnected!

extract-text-webpack-plugin

在使用webpack將vue_spa打包後，並不會出現css，由於css被打包入build.js，若是從vue組件中抽離出css，須要安裝插件extract-text-webpack-plugin，在使用的時候須要配合v2版本的纔可使用（若是使用了webpack2，則對應的插件版本都須要用v2版本）。具體配置以下：

module:{ rules:[ { test: /\.vue$/, loader: 'vue', options: { loaders:{ css: extractTextPlugin.extract({ loader: 'css-loader', fallbackLoader: 'vue-style-loader' }) } } } ] }, plugins: [ new webpack.HotModuleReplacementPlugin(), new extractTextPlugin({ filename:'/style.css', allChunks:true }) ],

在options中：

options.loader: string | object | loader[] (必填項) 這裏的 loader(s) 用於將資源轉換爲css導出模塊

options.fallbackLoader: string | object | loader[] 當css沒有被導出的時候這裏的 loader(s) 會被使用（即當在plugins模塊中設置allChunks:false的時候）

在plugins中：

filename：能夠設置被導出的css文件的路徑以及名字

allChunks：從全部附加塊中提取（默認狀況下，它只從初始塊中提取）

html-webpack-plugin

plugins: [
  new htmlWwebpackPlugin({ filename: 'assets/admin.html' }), ]

title：用於生成文檔的document

filename：要注入的html文件，默認爲index.html。能夠自定義（例如：assets/admin.html）

inject：
true | ‘head’ | ‘body’ | false
將資源注入所給的template或templateContent，當設置爲 true 或者 ‘body’，全部的資源會被注入到body底部。而head則會將js放到headelement

favicon: 在輸出的html中添加favicon

hash: true | false 若是爲true，則將一個惟一的webpack編譯散列附加到全部包含的腳本和CSS文件。這對緩存清除頗有用。

cache: true | false 若是爲true（默認），嘗試僅在更改後才發出文件。

是否要更換preset？

webpack2.x默認支持es6的模塊，因此在編譯時候沒有必要將它們先轉換爲CommonJS模塊再處理，因此在github中出現了babel-preset-es2015-webpack，可是這個模塊我在使用的時候出現了Cannot remove 'babel-plugin-transform-es2015-modules-commonjs' from the plugin list.的問題，根據babel-preset-es2015-webpack中的敘述以及issues#14可知，babel-preset-es2015已經支持不轉換模塊中的import和export，只須要設置.babelrc

{
    "presets": [ [ "es2015", { "modules": false } ] ] }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。