從0開始搭建vue+webpack腳手架（一）

時間 2020-05-07

標籤開始搭建 vue+webpack vue webpack 腳手架简体版

原文原文鏈接

　　基於多數狀況下都是使用vue-cli初始化項目，卻始終未去了解其原理。從零開始搭建，可讓本身更深層次的理解框架。css

首先從最基本的npm 開始，至於安裝npm 和 node就不用再贅述了，那是前端自動化開發最基本的能力。html

1、初始化前端

1 新建項目目錄，生成package.json並建立項目基本信息。vue

1 $ npm init --yes

2. 安裝基本項目依賴模塊node

1 $ npm install -S vue

1 $ npm install -D webpack webpack-cli webpack-dev-server 2 $ npm install -D vue-loader

　　上述依賴的功能須要注意的是webpack

　　（1）webpack@4.x以上須要安裝webpack-cli ，由於webpack的cli命令已被獨立分離到webpack-cli插件中web

　　（2）安裝vue-loader時會提示依賴於 css-loader和 vue-template-compiler (以下圖), 只需在安裝這兩個依賴便可vue-cli

3. 建立vue組件 src/App.vue, 入口文件src/index.jsnpm

 # App.vue
 
 1 <template>
 2   <div id='app'>{{msg}}</div>
 3 </template>
 4 
 5 <script>
 6   export default {  7     name: 'App',  8  data() {  9       return { 10         msg: 'Hello world'
11  } 12  } 13  } 14 </script>
15 
16 <style scoped>
17 
18 </style>

1 import Vue from 'vue'
2 import App from './App.vue'
3 
4 const root = document.createElement('div') 5 document.body.appendChild(root) 6 
7 new Vue({ 8   render: (h) => h(App) 9 }).$mount(root)

4. 根目錄下建立webpack.config.jsjson

 1 var path = require('path')  2 
 3 module.exports = {  4   entry: path.join(__dirname, 'src/index.js'),  5  output: {  6     path: path.join(__dirname, 'dist'),  7     filename: "scripts/bundle.js"
 8  },  9  module: { 10  rules: [ 11  { 12         test: /\.vue$/, 13  use: [ 14  { 15             loader: "vue-loader"
16  } 17  ] 18  } 19  ] 20  } 21 }

5. 添加 package.json文件中scripts 運行打包的腳本

1 "build": "webpack --mode=production --progress --colors"

　　注意：該處須要設定--mode，不然會報警告 production表示生產環境(打包代碼自動壓縮)， development表示開發環境

6. 打包項目, 報錯以下。

1 $ npm run build

注意點：在vue-loader@15.x以後, 必須使用VueLoaderPlugin插件，在webpack.config.js中添加兩行代碼：

 1 var path = require('path')  2 var VueLoaderPlugin = require('vue-loader/lib/plugin')  3 
 4 module.exports = {  5   entry: path.join(__dirname, 'src/index.js'),  6  output: {  7     path: path.join(__dirname, 'dist'),  8     filename: "scripts/bundle.js"
 9  }, 10  module: { 11  rules: [ 12  { 13         test: /\.vue$/, 14  use: [ 15  { 16             loader: "vue-loader"
17  } 18  ] 19  } 20  ] 21  }, 22  plugins: [ 23     new VueLoaderPlugin() 24  ] 25 }

再次打包，便可在根目錄下生成dist目錄 , 包含script/bundle.js文件

7. 接下來安裝兩個經常使用依賴

1 $ npm i -D clean-webpack-plugin # 在打包時刪除指定爲文件或目錄 2 $ npm i -D html-webpack-plugin   # 生成html入口文件

在webpack.config.js中配置, 同時在src目錄下建立index.html

 1 var path = require('path')  2 var VueLoaderPlugin = require('vue-loader/lib/plugin')  3 var htmlWebpackPlugin = require('html-webpack-plugin')  4 var cleanWebpackPlugin = require('clean-webpack-plugin')  5 module.exports = {  6   entry: path.join(__dirname, 'src/index.js'),  7  output: {  8     path: path.join(__dirname, 'dist'),  9     filename: "scripts/bundle.js"
10  }, 11  module: { 12  rules: [ 13  { 14         test: /\.vue$/, 15  use: [ 16  { 17             loader: "vue-loader"
18  } 19  ] 20  } 21  ] 22  }, 23  plugins: [ 24     new VueLoaderPlugin(), 25     new cleanWebpackPlugin(['dist']), 26     new htmlWebpackPlugin({ 27       template: path.join(__dirname, 'src/index.html') 28  }) 29  ] 30 }

src/index.html

1 <body>
2     <div id="root"></div>
3 </body>

更改index.js入口文件

1 import Vue from 'vue'
2 import App from './App.vue'
3 
4 new Vue({ 5   render: (h) => h(App) 6 }).$mount('#root')   // 再也不須要建立根節點，直接將App渲染到index.html中的#root節點

至此：項目初始化已經完成，運行 $ npm run build 已經能夠正常打包

2、配置靜態文件及CSS預處理器

　　1. 安裝相關loader

1 $ npm i -D style-loader 2 $ npm i -D stylus stylus-loader 3 $ npm i -D url-loader 4 $ npm i -D file-loader

　　2 配置webpack.config.js的rules，添加如下代碼：

 1       {  2         test: /\.css$/,  3         use: ['style-loader', 'css-loader']  4  },  5  {  6         test: /\.styl(us)$/,  7         use: ['style-loader', 'css-loader', 'stylus-loader']  8  },  9  { 10         test: /\.(jpg|jpeg|gif|png|svg)$/, 11  use: [ 12  { 13             loader: "url-loader", 14  options: { 15               // 單位是b 500kb = 512000b
16               limit: 512000, 17               name: '[name]-[hash:8].[ext]'
18  } 19  } 20  ] 21       }

須要注意的是，

　　　　　　（1）loader的編譯是從右到左的，因此在編譯css文件時應該是先css-loader再到style-loader

　　　　　　（2）stylus-loader是css的預處理器，固然也可使用less或者scss

　　　　　　（3）url-loader編譯時會將小於 512000b（即500kb）的圖片轉換成base64, 固然limit的大小能夠根據實際狀況本身設定。

　　　　　　（4）若是沒有安裝file-loader則會在打包運行時報錯找不到file-loader, 按提示安裝便可

　　　　　　（5）stylus的test中必須是 /\.styl(us)?&/，表示匹配的是.styl或者.stylus文件, 便可使用外部.styl文件, 也能夠.vue組件內使用stylus語法，如只寫/\.styl$/, 在.vue組件中使用<style lang='stylus'></style>中會出現下圖二的錯誤。表示沒法檢測到stylus-loader

此時能夠在index.js中引入assets下的的index.css和圖片文件

## src/index.js
1 import Vue from 'vue'
2 import App from './App.vue'
3 
4 import './assets/images/01.jpg'
5 import './assets/styles/index.css'
6 new Vue({ 7   render: (h) => h(App) 8 }).$mount('#root')

## src/assets/styles/index.css
1 body {
2  color: salmon;
3  background-image: url('../images/01.jpg');
4 }

## src/App.vue
1 <template>
2   <div>
3  {{msg}} 4     <img src="./assets/images/02.jpg" alt="">
5   </div>
6 </template>

打包發現報警告以下：

以上警告表示, 建議每一個輸出的文件的大小不要超過 244k。但開發環境由於包含了 sourcemap 而且代碼未壓縮因此通常都會超過這個大小，因此咱們能夠在開發環境把這個 warning 關閉。在生產環境建議打開warning或error，有助於警告文件過大影響性能。

如要關閉警告可在webpack.config.js添加配置項：兩個屬性配置一個便可。

1 performance: { 2   hints: false, // 直接關閉警告
3   maxAssetSize: 50000  // 增長限制的大小
4 }

至此，$ npm run build打包成功。可打開dist下的index.html，圖片和css文件正常加載。若是有小於500kb的圖片，將會轉爲base64打包到bundle.js中，而大於500kb的圖片正常輸出到目錄下。

接下來配置webpack-dev-server

相關標籤/搜索

每日一句

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