如何利用webpack4.0搭建一個vue項目

時間 2019-11-10

標籤如何利用 webpack4.0 webpack 搭建一個 vue 項目简体版

原文原文鏈接

做爲一個初學者，記錄本身踩過的坑是個好的習慣。我自己比較懶，這裏恰好有時間把本身的搭建過程記錄一下
這裏是參考文章 https://www.jianshu.com/p/1fc5b5151abf
文章裏面用的是 yarn 我這裏用npm
1 安裝 webpack 4.0 和webpack-cli

html

2 項目初始化
npm init -d
vue

3安裝 vue webpack webpack-dev-server -d
npm i vue webpack webpack-dev-server -dwebpack

等個幾分鐘，啦啦啦

有幾個warn，先不用管他，web

下面是版本npm

4.新建文件
在項目根目錄下新建一個index.htmljson

<!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>
</head>
<body>
    
</body>
</html>

在項目根目錄下新建一個webpack.config.js瀏覽器

var path = require('path');
var webpack = require('webpack');

module.exports = {};

新建src文件夾目錄，而且在src下新建main.js和utils.js，此時目錄結構以下：webpack-dev-server

main.jsui

var say = require('./utils');
say();

utils.jsspa

module.exports = function say() {
  console.log('hello world');
}

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './src/main.js', // 項目的入口文件，webpack會從main.js開始，把全部依賴的js都加載打包
  output: {
    path: path.resolve(__dirname, './dist'), // 項目的打包文件路徑
    publicPath: '/dist/', // 經過devServer訪問路徑
    filename: 'build.js' // 打包後的文件名
  },
  devServer: {
    historyApiFallback: true, //historyApiFallback設置爲true那麼全部的路徑都執行index.html。
    overlay: true // 將錯誤顯示在html之上
  }
};

配置一下package.json的啓動命令

運行
npm run dev

ok成功了

再修改一下，讓項目自動打開瀏覽器

5.安裝html-webpack-plugin解析html模版(npm i html-webpack-plugin -D)而且配置webpack.config.js文件

6.安裝vue-loader和vue-template-compiler解析vue模版(npm i vue-loader vue-template-compiler -D),而且配置webpack.config.js文件

7.在src下新建一個App.vue文件，而且在js中導入，而後導入到index.html

　　
main.js

運行 npm run dev