使用 webpack 4 配置 Vue.js 項目


1、Webpack 4 的基本安裝  
 
執行控制檯命令的兩個方法:
方法一:在 Windows資源管理器中建立並進入文件夾後,按鍵盤 Shift + 鼠標右鍵,選擇
「在此處打開 PowerShell 窗口」(Win 10)或 「在此處打開命令窗口」(Win 7),便可在
打開的窗口執行命令
方法二:在 Windows資源管理器中建立文件夾,啓動 WebStorm後打開該文件夾,點窗口左
下方的 Terminal(中文意思 是終端,用來執行命令的),便可執行命令。
 
 
一、建立項目文件:webpack-demo
mkdir webpack-demo  
cd webpack-demo
 
二、NPM 初始化項目package.json,進入項目文件夾,並在命令提示符下執行命令:
npm init  
或者所有使用默認值:
npm init -y
 
三、在本地安裝 webpack 和 webpack-cli
npm install webpack webpack-cli --save-dev
 
四、在項目中建立index.html、文件夾 ./src 和 JS 文件 ./src/index.js,以下:
  webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js
 
編輯文件 src/index.js
console.log("Hello World!");
 
五、打包 js 文件,執行構建命令:
D:\webpack-demo>npx webpack
 
屏幕輸出相似以下信息:
Hash: de6f43f472db75a3678e
Version: webpack 4.21.0
Time: 360ms
Built at: 2018-10-21 15:41:12
  Asset       Size  Chunks             Chunk Names
main.js  957 bytes       0  [emitted]  main
Entrypoint main = main.js [0] ./src/index.js 28 bytes {0} [built]
 
命令執行成功後在,在項目中會添加一個 dist文件夾,以及 dist/mian.js 文件
 
六、編輯index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack 4 demo</title>     
</head>
<body>
 
<script src="dist/main.js"></script>
</body>
</html>
 
保存,用瀏覽器打開該文件,F12 打開瀏覽器控制檯檢查是否有輸出結果。
 
使用一個配置文件
 
在 webpack 4 中,能夠無須任何配置使用,默認的入口是 src/index.js,默認的出
口是:dist/main.js,然而大多數項目會須要很複雜的設置,這就是爲何 webpack 仍然
要支持 配置文件。這比在終端(terminal)中手動輸入大量命令要高效的多,因此讓咱們創
建一個 webpack.config.js 取代以上使用 CLI 選項方式的配置文件,內容以下所示:
path = require('path');
 
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    }
};
 
 
使用 NPM 腳本執行構建命令
考慮到用 CLI 這種方式來運行本地的 webpack 不是特別方便,咱們能夠設置一個快捷方
式。在 package.json 添加一個 npm 腳本(npm script):
{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",     "build": "webpack"         // 添加這一行
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.21.0",
    "webpack-cli": "^3.1.2"
  }
}
 
如今,可使用 npm run build 命令,來替代咱們以前使用的 npx 命令。
D:\webpack-demo>npm run build
 
> webpack-demo@1.0.0 build D:\webpack-demo
> webpack
Hash: 49dbf2f0376708b5b0d8
Version: webpack 4.21.0
Time: 102ms
Built at: 2018-10-21 15:54:47
  Asset       Size  Chunks             Chunk Names
main.js  957 bytes       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js 28 bytes {0} [built]
 
2、最小的 Vue.js 配置
一、安裝生產階段依賴模塊和開發階段依賴模塊
npm install --save vue
 
二、修改webpack.config.js 文件
const path = require('path');
 
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: [
            '.js'
        ],
        alias: {
            vue: 'vue/dist/vue.js'
        }     }
};
 
三、修改index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack 4 demo</title>
</head>
<body>
<div id="app">
    {{message}}
</div>
<script src="dist/main.js"></script>
</body>
</html>
 
四、修改index.js文件
import Vue from 'vue';
 
var vue = new Vue({
    el: '#app',
    data: {
        message: 'Hello World'
    }
});
 
六、執行構建命令: npm run build
D:\webpack-demo>npm run build
 
> webpack-demo@1.0.0 build D:\webpack-demo
> webpack
 
Hash: 0d271c85cebc3d506967
Version: webpack 4.21.0
Time: 2740ms
Built at: 2018-10-21 16:25:18
  Asset     Size  Chunks             Chunk Names
main.js  109 KiB       0  [emitted]  main
Entrypoint main = main.js
[0] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] ./src/index.js 121 bytes {0} [built]
    + 4 hidden modules
 
七、在瀏覽器打開index.html 文件,檢查運行結果 3、單文件組件與 vue-loader  
一、安裝開發階段的依賴(使用Babel 6)
npm install --save-dev  vue-loader vue-template-compiler babel-core
babel-loader babel-preset-env
 
npm install --save-dev @babel/core @babel/cli @babel/preset-env
 
安裝 polyfill(生產階段依賴,用於對 IE 瀏覽器等提供 ES2015+ 環境的支持)
npm install --save @babel/polyfill
 
安裝後,package.json 文件內容如如下所示:
{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.1.2",
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-preset-env": "^1.7.0",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.21.0",
    "webpack-cli": "^3.1.2"
  },
  "dependencies": {
    "@babel/polyfill": "^7.0.0",
    "vue": "^2.5.17"
  }
}
 
二、在項目中添加文件 .babelrc,內容以下:
{
  "presets": [
    [
      "env",       {
        "targets": {
          "browsers": ["last 2 versions", "IE 11"]
        },
        "modules": false,
        "useBuiltIns": true
      }
    ]
  ]
}
 
三、修改webpack.config.js 文件,內容以下所示:
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
 
 
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    // 模塊
    module: {
        rules: [
            {
                test:/\.vue$/,
                use:[
                    {
                        loader: "vue-loader",
                    },
                ]
            },
            {
                /* 用 babel來解析 js文件並把 es6 的語法轉換成瀏覽器認識的語法
*/
                test:/\.js$/,
                /* 排除模塊安裝目錄的文件 */
                exclude:/node_modules/,
                use:[
                    {
                        loader:'babel-loader',
                    },
                ]
            }
        ]     },
    resolve: {
        modules:[path.join(__dirname,'src'),'node_modules'],
        extensions: [
            '.js','.vue'
        ],
        //給vue 配置別名,import 引入不用寫易長串
        alias: {
            // vue: 'vue/dist/vue.js'
            'vue$':'vue/dist/vue.esm.js'
        }
    },
    //插件,用於生產模板和各項功能
    plugins: [
        new VueLoaderPlugin()
    ],
};
 
四、修改 index.html,內容如如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack 4 demo</title>
</head>
<body>
<div id="app">
Loading...
</div>
<script src="dist/main.js"></script>
</body>
</html>
 
五、修改./src/index.js 文件如如下內容:
import Vue from 'vue';
import App from './app.vue';
 
var vue = new Vue({
    el: '#app',
    render: h => h(App)
});
 
六、添加單文件組件文件./src/app.vue,src 文件夾上右鍵 -> new -> Vue Component,
內容如如下所示:
<template>
    <div id="app">         {{msg}}
    </div>
</template>
 
<script>
    export default {
        name: "app",
        data:function () {
            return{
                msg:'welcome to your vue.js App'
            }
        }
    }
</script>
 
<style scoped>
 
</style>
 
七、執行構建命令:npm run build
D:\webpack-demo>npm run build
 
> webpack-demo@1.0.0 build D:\webpack-demo
> webpack
 
Hash: c23b2f56ea24497d680a
Version: webpack 4.21.0
Time: 1482ms
Built at: 2018-10-21 18:13:39
  Asset      Size  Chunks             Chunk Names
main.js  91.5 KiB       0  [emitted]  main
Entrypoint main = main.js
[0] ./node_modules/vue-loader/lib??vue-loader-
options!./src/app.vue?vue&type=style&index=0&id=5ef48958&scoped=true&lang
=css& 19 bytes {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[6] ./src/app.vue?vue&type=style&index=0&id=5ef48958&scoped=true&lang=css
& 312 bytes {0} [built]
[7] ./src/index.js + 6 modules 4.86 KiB {0} [built]
    | ./src/index.js 143 bytes [built]
    | ./src/app.vue 1.14 KiB [built]
    | ./src/app.vue?vue&type=template&id=5ef48958&scoped=true& 207 bytes
[built]
    | ./src/app.vue?vue&type=script&lang=js& 332 bytes [built]
    | ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-
loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=template
&id=5ef48958&scoped=true& 291 bytes [built]
    | ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-
loader-options!./src/app.vue?vue&type=script&lang=js& 142 bytes [built]
    |     + 1 hidden module
    + 4 hidden modules
 
八、在瀏覽器中運行index.html 文件,檢查結果。
 
4、使用 webpack-dev-server構建本地服務器
一、安裝webpack-dev-server、html-webpack-plugin 到開發階段依賴
npm install --save-dev webpack-dev-server html-webpack-plugin
 
二、修改webpack.config.js 文件
在開頭添加webpack 和 html-webpack-plugin 引用
const webpack = require('webpack');
const HtmlWebPackPlugin = require('html-webpack-plugin');
 
在 module.exports內添加如下兩個小節
//插件,用於生產模板和各項功能
plugins: [
    new VueLoaderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebPackPlugin({
        template: 'index.html',
        inject: true,
    }),
],
devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress:true,
    historyApiFallback: true,
    inline: true,
    hot: true
},
 
三、修改package.json 文件,在"scripts"小節內添加 "start" 行,以下所示
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack --mode development",
  "start": "webpack-dev-server --inline"   // 添加這一行
},
 
四、在命令提示符或WebStorm 的終端中輸入如下命令便可啓動本地調試服務器:
npm run start
 D:\webpack-demo>npm run start
 
> webpack-demo@1.0.0 start D:\webpack-demo
> webpack-dev-server --inline
 
i 「wds」: Project is running at http://localhost:8080/
i 「wds」: webpack output is served from /
i 「wds」: Content not from webpack is served from D:\webpack-demo\dist
i 「wds」: 404s will fallback to /index.html
i 「wdm」: Hash: 65e7921c6a791f244a0f
Version: webpack 4.21.0
Time: 2300ms
Built at: 2018-10-24 20:44:57
     Asset       Size  Chunks             Chunk Names
   main.js   1010 KiB    main  [emitted]  main
 0.main.js   17.4 KiB       0  [emitted]
index.html  271 bytes          [emitted]
 
 
本地調試服務器啓動後,在瀏覽器的地址欄輸入:http://localhost:8080/,便可查看項
目運行的結果,同時服務器會監控各個頁面的修改並反饋到網頁中。
 
5、在 Vue.js中使用Bootstrap(這裏只使用 CSS)進行
一、添加Bootstrap 4 到生產階段依賴
npm install bootstrap -S
 
二、安裝處理CSS的加載器到開發階段依賴
npm i style-loader css-loader -D
 
三、修改webpack.config.js 文件,在module 的rules小節中添加如下內容:
{
    test:/\.css$/,
    use:['style-loader','css-loader'],
}
 
四、在入口的index.js 文件中添加css 的引用
import Vue from 'vue';
import App from './app';
import 'bootstrap/dist/css/bootstrap.css';  // 添加樣式文件的引用
 
Vue.config.productionTip = false;  // 做用是阻止 vue 在啓動時生成生產提示 var vue = new Vue({
    el: '#app',
    render: h => h(App)
}).$mount('#app');
 
完成以上設置後,便可使用 bootstrap 樣式了。
 
6、使用前端路由vue-router
一、安裝vue-router 到生產階段依賴
npm install vue-router -S
 
二、在src文件夾中新建 component 文件夾,
三、在component文件夾中添加單文件組件home.vue,內容以下所示:
<template>
    <div>This is home vue</div>
</template>
 
<script>
    export default {
        name: "home"
    }
</script>
 
<style scoped>
 
</style>
 
四、在component文件夾中添加單文件組件about.vue,內容以下所示
<template>
    <div>關於頁面。</div>
</template>
 
<script>
    export default {
        name: "about"
    }
</script>
 
<style scoped>
 
</style>
 
五、添加路由信息文件src/router.js,內容如如下所示:
import Vue from 'vue';
import Router from 'vue-router';
import Home from './component/home.vue';  
Vue.use(Router);
export default new Router({
    base: process.env.BASE_URL,
    // 下面這個單詞要注意,是 routes(沒有 r), 不是 routers
    routes: [
        {path: '/', name: 'home', component: Home},
        {path: '/about', name: 'about', component: (resolve) =>
require(['./component/about.vue'], resolve)}
    ]
});
 
六、修改src/index.js 文件,
import Vue from 'vue';
import App from './app';
import router from 'router'      // 導入上一步的路由信息
import 'bootstrap/dist/css/bootstrap.css';
 
Vue.config.productionTip = false;  // 做用是阻止 vue 在啓動時生成生產提示
var vue = new Vue({
    el: '#app',
    router: router,      // 指定路由
    render: h => h(App)
}).$mount('#app');
 
 
七、修改app.vue 文件,如如下內容所示:
<template>
    <div id="app" class="container">
        <div class="row">
            <div id="nav" class="col-3">
                <ul>
                    <li>
                        <router-link to='/'>Home</router-link>
                    </li>
                    <li>
                        <router-link to='/about'>About</router-link>
                    </li>
                </ul>
            </div>
            <div class="col-9">
                <router-view/>
            </div>
        </div>
    </div>
</template>  
<script>
    export default {
        name: "app",
    }
</script>
 
<style scoped>
 
</style>
 
八、啓動本地調試服務器
npm run start
 
九、在瀏覽器中輸入地址:http://localhost:8080,查看運行結果
 
說明:
一、使用vue-router 的時候須要webpack-dev-server 的支持,否則地址欄沒法進行路由
的匹配;
二、vue-router默認的路由會在地址欄中顯示有一個 # 的符號,這個是由於使用的是hash
mode,若是要去掉#/,改爲 history模式就能夠了,具體配置在router 中添加一行 mode:
'history', 以下:
import Vue from 'vue';
import Router from 'vue-router';
import Home from './component/home.vue';
 
Vue.use(Router);
export default new Router({
    mode: 'history',     // history 模式
    base: process.env.BASE_URL,
    // 下面這個單詞要注意,是 routes(沒有 r), 不是 routers
    routes: [
        {path: '/', name: 'home', component: Home},
        {path: '/about', name: 'about', component: (resolve) =>
require(['./component/about.vue'], resolve)}     ]
});
 
 
 
 
 
 
 
 
 
 
 
 
 
 css

相關文章
相關標籤/搜索