基於webpack從0配置vue開發

時間  2020-04-20
標籤 基於 webpack 配置 vue 開發 简体版
原文   原文鏈接

vue 官方爲了讓開發者快速進行開發，爲了很大的精力，提供了vue-cli腳手架，只需簡單幾步，就能開始vue的開發了。css

然而，對項目裏的webpack封裝和配置瞭解的不清楚，就容易致使出問題不知如何解決，甚至不會經過webpack去擴展新功能，對webpack+vue項目到底是怎樣搭建起來的感到一臉懵逼。html

本文就是要解決這個問題。前端

初始化項目：

打開terminal，經過如下命令生成項目目錄：vue

mkdir vue_webpack_demo
複製代碼

進入項目目錄，並生成 package.json 文件（主要是項目的基本信息）：node

mkdir vue_webpack_demo && npm init
複製代碼

安裝webpack及腳手架

在安裝好了node開發環境後，經過如下命令安裝：webpack

npm i -D webpack webpack-cli
複製代碼

此時webpack和webpack-cli會被安裝到項目目錄的node_modules目錄下，同時webpack和webpack-cli會被添加到package.json 文件中的devDependencies(由於只是輔助開發，因此在此)對象中。css3

由於寫當前博客的時間是2019年12月，因此安裝的webpack是webpack4的最新穩定版本，不少配置都有默認的了。web

配置ES6+轉碼爲ES5:

babel-loader能夠將ES6代碼轉爲ES5代碼，從而能夠在現有環境執行，因此咱們能夠用ES6編寫，而不用考慮環境支持的問題。正則表達式

例如IE9根本看不懂代碼寫的let和const是什麼東西？只能選擇報錯，這就是瀏覽器對ES6的兼容性問題；咱們能夠經過 babel-polyfill 對一些不支持新語法、兼容性差的客戶端提供新語法的實現。vue-cli

npm i -D babel-loader @babel/core @babel/preset-env
複製代碼

而後，在項目根目錄下新建一個src文件夾，而後再建一個 index.js 文件，

mkdir src && cd src && vi index.js
複製代碼

在 index.js中，寫上2句代碼：

const str = 'word';
console.log('hello ', str);
複製代碼

由於寫當前博客的時間是2019年12月，因此安裝的webpack是webpack4的最新穩定版本，不少配置都有默認的了。因此在項目根目錄下執行如下命令：

webpack
複製代碼

就會把src的默認入口文件 index.js 打包到dist目錄下。

建立webpack.config.js文件

在項目根目錄下增長webpack.config.js文件：

vi webpack.config.js
複製代碼

而後寫入如下配置：

module.exports = {
  mode: 'development', // 打包模式
  entry : './src/index.js', // 入口文件
  output : {
      filename : 'index.js', // 輸出文件名
      path :  __dirname+'/dist' // 輸出文件的根路徑
  },
  module : {
      rules: [
          {
              /*將js文件轉碼成es5*/
              test: /\.js?$/,
              use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env']
                  }
                }
          },
      ]
  },
}
複製代碼

而後在package.json的scripts先添加下面這個指令：

"build": "webpack --config ./webpack.config.js",
複製代碼

最後在terminal中運行:

npm run build
複製代碼

能夠看到根目錄會生成一個 dist 文件夾，包含一個由 src/index.js 打包出來的index.js。

使用 html-webpack-plugin來建立html頁面

  • 安裝html-webpack-plugin插件
npm i -D html-webpack-plugin
複製代碼
  • 添加入口文件 在根目錄下建立 index.html 文件：
vi  index.html
複製代碼
  • 添加下面代碼：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>作有追求的碼農</title>
  </head>

  <body>
    <div id="app"></div>
  </body>
</html>
複製代碼
  • 修改webpack.config.js配置
const path = require('path');
const HtmlWebpackplugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development', // 指定開發者打包模式
  entry : './src/idex.js', //入口文件
  output : {
      filename : 'index.js',
      path :  __dirname+'/dist'
  },
  module : {
      rules: [
          {
            /*將js文件轉碼成es5*/
            test: /\.js?$/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          },
      ]
  },
  plugins:[
    new HtmlWebpackplugin({
      filename: 'index.html', // 打包後的文件名，默認index.html
      template: path.resolve(__dirname, 'index.html') // 導入被打包的文件模板
    })
  ]
}
複製代碼
  • 查看效果 運行npm run build ，咱們能夠看到 dist 文件夾下有一個index.html生成了，並且還引入了src/index.js的壓縮包index.js。

安裝配置並使用vue

  • 安裝vue及其插件：
npm i vue && npm i -D vue-loader vue-template-compiler
複製代碼

其中，vue-loader 用於解析.vue文件，vue-template-compiler 用於編譯模板。

  • 修改webpack.config.js配置
const path = require('path');
const HtmlWebpackplugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  mode: 'development', // 指定開發者打包模式
  entry : './src/idex.js', //入口文件
  output : {
      filename : 'index.js',
      path :  __dirname+'/dist'
  },
  module : {
      rules: [
          {
            /*將js文件轉碼成es5*/
            test: /\.js?$/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          },            
          {
            test: /\.vue$/,
            use: [
              {
                loader: 'vue-loader',
                options: {
                  compilerOptions: {
                    preserveWhitespace: false
                  },
                }
              }
            ]
          },
      ]
  },
  plugins:[
    new HtmlWebpackplugin({
      filename: 'index.html', // 打包後的文件名，默認index.html
      template: path.resolve(__dirname, 'index.html') // 導入被打包的文件模板
    }),
     new VueLoaderPlugin()
  ]
}
複製代碼
  • 使用vue 在 src 新建一個 App.vue：
cd src && vi App.vue
複製代碼

在App.vue 中添加如下代碼：

<template>
  <div class="App">
    要作 {{msg}} 的碼農
  </div>
</template>

<script>
export default {
  name: 'App',

  data() {
    return {
        msg: "有追求的",
    };
  }
};
</script>
複製代碼
  • 修改src/index.js的代碼爲：
import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app');
複製代碼
  • 打包及運行vue 再次運行：
npm run build
複製代碼

而後在瀏覽器打開 dist/index.html，能夠發現vue已經能夠運行了。

安裝本地服務及代碼熱更新

  • 安裝webpack-dev-server
npm i -D webpack-dev-server 
複製代碼
  • 修改webpack.config.js配置
// ...
    devServer: { 
        host: 'localhost',
        port: 9527
    },
// ...
複製代碼
  • 在package.json的scripts中增長一行啓動本地服務指令：
"start": "webpack-dev-server",
複製代碼

默認會讀取根目錄下的webpack.config.js配置文件。

  • 運行以及查看效果
npm start
複製代碼

用瀏覽器打開 http://localhost:9527/, 就能夠本地開發了哦！並且當咱們修改 src/App.vue 的代碼後，瀏覽器是會自動刷新的(熱更新)。

目前爲止，一個簡單的vue項目咱們已經搭建出來了，以後咱們能夠像堆積木同樣添加本身想要的功能了。

須要注意的是，devServer生成的文件是存在咱們電腦的內存中的，不在咱們的硬盤上。

加一些經常使用的loader

對於webpack來講，默認只能打包處理JS文件，或者說JS模塊，可是webpack做爲模塊打包工具，須要打包的模塊確定不只僅只有JS模塊，還有：圖片模塊，CSS模塊等等。

loader就是幫助webpack打包那些webpack默認打包不了的模塊的工具；配置第三方loader，須要在webpack的配置文件中新增一個module節點，節點中是一個一個的規則集合，集合名字是rules，須要添加loader就在rules的集合中新增一個規則；每一個規則必須的兩個配置：

  • test  ：test搭配的是鍵值對，值是一個正則表達式，用來匹配要處理的文件類型；
  • use  ：用來指定使用哪一個loader模塊來打包處理該文件；

安裝一些經常使用的loader

npm i -D  css-loader style-loader url-loader postcss-loader autoprefixer
複製代碼

其中：css-loader主要是解析 css 文件，style-loader 主要是將 css 解析到html頁面的style上，postcss-loader和autoprefixer實現自動添加css3前綴。

特別是: file-loader能夠用來幫助webpack打包處理一系列的圖片文件，而url-loader它除了作file-loader能作的事情，還會經過配置規則將必定範圍大小的圖片打包成base64的字符串，放到dist.js文件裏，從而減小https的圖片請求數。

在webpack.config.js中增長配置

// ...
{
    test: /\.css$/,
    use: [
        {
            loader: 'style-loader'
        },
        {
            loader: 'css-loader'
        },
        {
            loader: 'postcss-loader',
            options: {
                plugins: [
                    require("autoprefixer") /*自動添加前綴*/
                ]
            }
        }
    ]
},
{
    test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
    use: [{
      loader: 'url-loader',
      options: {
        limit: 10000
      }
    }]
}
複製代碼

自定義環境變量和常量

經過 webpack提供的DefinePlugin插件，能夠很方便的定義環境變量

  • 在根目錄下添加config.js
const NODE_ENV = process.env.NODE_ENV; // webpack編譯時會獲取node環境的配置信息
const config = {
     production: { // 生產環境(線上環境)
        DOMAIN: 'production.com', // 上線域名
     },
     development: { // 開發環境
        DOMAIN: 'development.com', // 測試域名
     }
}
module.exports = config[NODE_ENV];
複製代碼
  • 修改webpack.config.js文件
// ...
const constant = require('./config'); 
// ...
plugins:[
        // ...
        new webpack.DefinePlugin({ 
          CONSTANT: JSON.stringify(constant)
        })
        // ...
    ],
// ...
複製代碼
  • 修改package.json
"scripts": {
    "start": "NODE_ENV=development webpack-dev-server",
    "build": "NODE_ENV=production webpack --config webpack.config.js"
  },
複製代碼

NODE_ENV=development和NODE_ENV=production指定node環境

  • 運行及調試 因爲修改了webpack.config.js因此須要從新運行npm start, 而後在src/idex.js後面加上一句測試代碼：console.log(CONSTANT);

能夠看到，配置成功打印出來了。

總結：

vue-cli是一個封裝得很完美的vue腳手架，因此它的適應性很強；可是有些大公司他們的前端項目通常不會直接套用這種腳手架，而是須要結合公司內部的組件一步步搭起一個vue前端項目。

單純的vue架構是很是簡單的，可是結合到node環境和webpack一塊兒用的話，有一些不是太熟悉node、webpack的前端同窗就會有些蒙圈。

本文咱們主要是搭建了一個基於webpack的vue開發環境，而後將須要的東西一件一件組裝起來，雖然不算太完善，可是學會了這種思路的話，咱們處理其餘前端項目也不難了。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程