使用webpack 配置Vue項目

一、初始化npm

npm init

二、安裝webpack和webpack-cli

npm i webpack --save-dev
npm i webpack-cli --save-dev

三、安裝vue

npm i vue vue-loader --save-dev
npm i vue-template-compiler --save-dev

四、安裝css-loader style-loader

npm i css-loader style-loader --save-dev

五、新建一個src文件夾，新建文件index.js,根目錄新建文件webpack-dev-server.js

•     webpack-dev-server.js 配置，（vue\css\圖片）的依賴，webpack-dev-server工具的使用，以及cross-env工具

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports={
    entry:"./src/index.js",
    output:{
        path: __dirname,
        filename: './dist/bundle.js'
    },
    module:{
        rules:[
            {
                test: /\.vue$/,
                exclude: /node_modules/,
                use:[
                    "vue-loader"
                ]
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            },
            {
                test: /\.(png|gif|jpg|jpeg|svg)$/,
                exclude: /node_modules/,
                use: [
                    "url-loader"
                ]
            }
        ]
    },
    plugins:[
        new htmlWebpackPlugin({
            template: './index.html'
        }),
        new VueLoaderPlugin()
    ],
    devServer:{
        contentBase: path.join(__dirname,'./dist'),
        // host: '0.0.0.0',
        open: true,
        port: 8082
    }
}

• package.json: 這裏配置

"dependencies": { //loader
    "css-loader": "^2.1.0",
    "style-loader": "^0.23.1",
    "vue": "^2.6.7",
    "vue-loader": "^15.6.4",
    "webpack-cli": "^3.2.3",
    "webpack": "^4.29.5"
  },
  "devDependencies": { //loader
    "cross-env": "^5.2.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "url-loader": "^1.1.2",
    "vue-template-compiler": "^2.6.7",
    "webpack-dev-server": "^3.2.0"
  },
  "scripts": { //運行腳本
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=production webpack --config webpack-dev-config.js --mode production", 
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack-dev-config.js --mode development"
  },
  "author": "",
  "license": "ISC"
}

• index.js配置

import Vue from 'vue'
import App from './App.vue'

import './css/base.css'
import './images/timg.gif'

const root = document.createElement('div')
root.id = 'app'
document.body.appendChild(root)

new Vue({
    render:(h)=> h(App)
}).$mount(root)