從零開始搭建一個基於webpack的Vue開發環境（1）

時間 2019-11-10

標籤開始搭建一個基於 webpack vue 開發環境简体版

原文原文鏈接

前言

看了大量的文章，關於vue都是直接使用vueCli實現vue項目的基本環境搭建，使用最原始的搭建方法的不多不多，深覺得要想真正學好vue，仍是要將webpack充分理解，同時將其與vue結合，這樣即便沒有vueCli，搭建vue的環境也不在話下。css

下面咱們將從1，2，3，總共3個部分，漸進式的改良代碼，利用webpack從最基本的項目的環境搭建（第一部分），到利用webpack基於script的vue的項目環境（第二部分），最後到利用webpack搭建基於單文件vue組件的項目環境（第三部分）。相信經過這種方式，對webpack的理解能夠到一個不錯的高度。html

好的，開始進入正題，首先，咱們從利用webpack搭建一個最簡單的項目開始：
1.安裝項目須要的相關依賴包vue

npm install --save-dev webpack
npm install --save-dev webpack-cli
npm install --save-dev webpack-dev-server
npm install --save-dev style-loader
npm install --save-dev css-loader
npm install --save-dev file-loader
npm install --save-dev html-webpack-plugin
//這裏之因此用mini-css-extract-plugin而不是extract-text-webpack-plugin，是由於咱們使用webpack4，而4推薦mini-css-extract-plugin來作css的提取
npm install --save-dev mini-css-extract-plugin

這裏我稍微介紹如下，安裝的webpack包是webpack的核心，必須有它才能使用webpack，可是光有他不行，還須要webpack-cli這個命令行工具，至於webpack-dev-server則是webpack提供給咱們的一個服務器工具，幫助咱們在開發環境下啓動項目。style-loader和css-loader則是webpack的loader，前者用於向網頁中動態插入style標籤和css，後者則是轉換css中的import和url，file-loader則是針對css或者js中引入的圖片進行處理，html-webpack-plugin和mini-css-extract-plugin則是webpack須要的額外的插件，前者用於動態將生成的打包文件插入index.html,後者則是將css提取成單獨的css文件.
node

接着咱們來挨個看下這些文件的內容,首先是main.css:webpack

.app{
  color:red;
  font-size: 24px;
  width:150px;
  height:100px;
  background-image: url('../img/img.jpg');
  background-repeat: no-repeat;
}

接着是util.jsweb

import img from './img/login-bg.jpg'
export default function say() {
  console.log(img)
  console.log('hellow world')
}

不管是main.css仍是util.js,咱們都引入了圖片,這裏關於圖片的處理,就是要交給file-loader,由於在webpack的世界裏,一切皆模塊,但webpack只認識js的模塊,對於圖片模塊,只能交給專門的loader來處理,也就是file-loader
而後是main.jsnpm

import say from './util'
import './css/main.css'
say()

template.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>Document</title>
  <!-- 使用htmlWebpackPlugin和miniCssExtractPlugin這兩個插件就不使用下面這種手動導入bundle.js的方式 -->
  <!-- <script src="/custom/bundle.js"></script> -->
</head>
<body>
  <div class="app">
    app的應用
  </div>
</body>
</html>

最後就是核心的webpack.config.jsapp

const path = require('path')
const webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin');
const miniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js',
    //output的publicPath決定了異步加載的js，使用htmlWebpackPlugin插入的bundle.js，從css中引入的圖片或字體，以及miniCssExtractPlugin分離的css等的文件引用路徑
    publicPath: '/dist/'
  },
  mode: 'development',
  devServer: {
    publicPath: "/dist/"
  },
  module: {
    rules: [
      // {
      //   //css樣式被bundle.js注入到html頁面的style裏
      //   test: /\.css$/i,
      //   exclude: /node_modules/,
      //   use: ['style-loader', 'css-loader']
      // },
      {
        test: /\.css$/i,
        exclude: /node_modules/,
        use: [{
          loader: miniCssExtractPlugin.loader
        }, 'css-loader']
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: './images/'
            }
          },
        ],
      },
    ]
  },
  plugins: [
    //在dist下以template.html爲模板生成index.html文件，同時將
    //bundle.js插入html文件的body底部
    new htmlWebpackPlugin({
      template: './template.html',
      filename: 'index.html'
    }),
    // 將css樣式抽取到單個css文件中，以link文件的方式插入到index.html的head中
    new miniCssExtractPlugin({
      filename: '[name].css'
    })
  ]
}

ok,到這裏，咱們能夠選擇打包項目，也能夠選擇使用webpack-dev-server來啓動項目(訪問localhost:8080/dist/index.html)便可
這裏主要是利用webpack包裝了一個js項目，主要是演示關於文件，css，js在webpack中的基本使用，目前尚未引入vue的內容，下面第二部就是將vue加進來異步

相關標籤/搜索

每日一句

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