新建資料夾webpacktest

初始化專案

npm init 

會出現選項練習專案一律預設即可，會生成package.json

安裝

npm i webpack vue vue-loader

會出現WARN
npm WARN [email protected] requires a peer of [email protected]* but none is installed. You must install peer dependencies yourself.
需要安裝 css-loader

npm i css-loader 

• 新建資料夾src
• 在src中新建檔案app.vue（元件）
• 在src中新建assets檔案
• 在assets中新建images和styles檔案放入圖片和樣式
  
  app.vue（元件）

**練習**
//元件不能直接掛載到html裡
<template>
    <div id="test">{{text}}</div>
</template>

<script>
export default {
    data() {
        return{
            text:'abc4564'
        }
    }
}
</script>

<style scoped>
#test{color:red;}
</style>
 

styles檔案中新建test.css

body{
    color: red;
    background-image: url('../images/large.jpg')
}

新建js檔案webpack.config.js（打包前端資源）

//打包出來在瀏覽器可以直接執行的js程式碼
const path = require('path')  //path是node.js裡的基本包
const HTMLPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin') //webpack4配置需要包含VueLoaderPlugin

const isDev = process.env.NODE_ENV === 'development' //判斷是不是true

const config = {
    target: "web",
    entry: path.join(__dirname,'src/index.js'),   //入口entry要使用絕對路徑   _dirname是根目錄   拼接路徑形成絕對路徑，保證絕對可以訪問到我們的檔案
    output: {
        filename: "bundle.js",//輸出的檔名
        path: path.join(__dirname,'dist') //輸出路徑
    },                                            //出口,輸出檔案
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: "vue-loader"
            },
            {
                test:/\.css$/,
                //loader:['style-loader','css-loader']
                use:['style-loader','css-loader'] //css會以js程式碼出現
            },
            {
                test:/\.(gif|jpg|jpeg|png|svg)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:1024,
                            name:'[name].[ext]'
                        }// 圖片
                    }
                ]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new webpack.DefinePlugin({
            'process.env':{
                NODE_ENV: isDev ? '"development"' : '"production"'
            }
        }),
        new HTMLPlugin()
    ]//webpack4配置需要包含VueLoaderPlugin,在輸出裡面配置plugins：
}
if (isDev){
    config.devServer = {
        port:8000,
        host:'0.0.0.0',
        overlay:{
            errors:true,
        },
      //  open:true //自動開啟瀏覽器
    }

}
module.exports = config

 

package.js > script下新增程式碼如下：
因為只有在這裡配置了，才能執行內部的webpack

"build": "webpack --config webpack.config.js"

在src中新建index.js（入口檔案）

//入口檔案
import Vue from 'vue'   //映入vue類庫
import App from './app.vue'  //app來自vue檔案

import './assets/styles/test.css'
import './assets/images/large.jpg'

const root = document.createElement('div')
document.body.appendChild(root)   //建立節點

new Vue({
    render:(h) => h(App)  //把app掛載到html裡
}).$mount(root)           //呼叫api，$mount到html的節點裡

繼續build

npm run build 

會出現報錯npm WARN [email protected] requires a peer of [email protected]…
需要安裝 vue-template-compiler

npm i vue-template-compiler

繼續build

npm run build 

成功後會出現dist資料夾和bundle.js

安裝

npm i style-loader url loader file-loader

安裝

npm i cross-env

package.js > script下修改並新增程式碼如下：

"build": "cross-env NODE_ENV=PRODUCTION webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

執行

npm run dev