vue2+webpack4搭建項目

時間  2019-11-15
標籤 vue2+webpack4 vue webpack 搭建 項目 简体版
原文   原文鏈接

用了好幾回vue-cli，仍是決定手工搭建一個vue2+webpack4項目
1.爲了可拓展性
2.vue.config.js真是用的不開心
3.對webpack4和vue2的合做瞭解的更多
本文代碼的git地址 github.com/shaohuanhua…
參考的 www.jianshu.com/p/6ff34032a…
前面幾步基本同樣,爲了更易理解，文件命名和位置作了改動，更接近vue-cli3
javascript

一，初級構建

新建一個imitateCli文件夾，打開終端開始構建
css

npm init
複製代碼

安裝框架所需基本：
html

npm i webpack vue vue-loader -D
複製代碼

(vue-loader：解析和轉換 .vue 文件，提取出其中的邏輯代碼 script、樣式代碼 style、以及 HTML 模版 template，再分別把它們交給對應的 Loader 去處理)
vue

npm i webpack-cli -s -d  (webpack4 已經開始使用webpack-cli)<br>
npm i css-loader vue-template-compiler -D<br>
複製代碼

（css-loader：加載由 vue-loader 提取出的 CSS 代碼。 ）
（vue-template-compiler：把 vue-loader 提取出的 HTML 模版編譯成對應的可執行的 JavaScript 代碼）
而後咱們在src目錄下面新建一個app.vue文件，裏面就能夠寫一些關於項目的業務代碼：
java

<template>
    <div> luckfine </div>
</template>
<script> export default { data () { //text: 'luckfine' } } </script>
<style> </style>
複製代碼

後綴爲.vue 文件是不能夠在瀏覽器裏直接運行的，咱們得讓它運行起來。
如今咱們要在項目根目錄下新建一個webpack.config.js文件，webpack（號稱打包一切）它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包爲合適的格式以供瀏覽器使用。
咱們在src目錄下新建一個main.js做爲入口文件，順便在裏面寫點東西：
node

// main.js
import Vue from 'vue'
import App from './app.vue'

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

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

main.js準備完畢以後，那麼在webpack.config.js裏面就能夠這樣寫：
webpack

// webpack.config.js
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    entry:  path.join(__dirname, 'src/main.js'),
    mode:'develop',
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins:[
        new VueLoaderPlugin()
    ],
}
複製代碼

webpack把全部的文件打包成一個bundle.js文件，而且是能在瀏覽器裏面直接運行的代碼。
如今咱們能夠在package.json 文件裏的scripts對象裏面添加一個腳本：
(注意：webpack4中已經在啓動時用mode指定啓動環境)
git

"scripts": {
    "build": "webpack --config webpack.config.js --mode=development"
  },
複製代碼

添加完這段以後，咱們再去terminal執行下npm run build,會發現build成功
github

三，啓動項目

爲了本地能啓動咱們的項目，咱們能夠安裝一個devServerweb

npm install webpack-dev-server -s -d
npm install html-webpack-plugin -d -s
複製代碼

此時的webpack.config.js

// webpack.config.js
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    entry:  path.join(__dirname, 'src/main.js'),
    mode: 'develop',
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins:[
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin()
    ],
    devServer: {
        historyApiFallback: {
          index: `/dist/index.html`
        },
        host: '0.0.0.0',
        port: '8014',
        disableHostCheck: true
    }
}
複製代碼

package.json中添加啓動入口

"dev": "webpack-dev-server --inline --hot --mode=development",
複製代碼

此時咱們在terminal執行npm run dev
便可看到他自動給咱們建立了一個index.html,把打包好的js插入進裏面，且項目已經能夠運行

0.0.0.0:8014 或者 localhost:8014

devServer應該默認hot:true的吧

四：加入經常使用vue拓展

引入vue-router
npm install vue-router -d -s
複製代碼
// main.js
import VueRouter from 'vue-router'
import router from './router' // 路由單獨放個文件
Vue.use(VueRouter)
...
new Vue({
    router, // 全局引入
    render: (h) => h(App)
}).$mount(root)

複製代碼
習慣用index.html作載體，能夠額外放第三方插件啥的

建文件public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>cli demo</title>
  </head>
  <body>
    <noscript>
      <strong>不支持script</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
複製代碼
// main.js
import Vue from 'vue'
import App from './app.vue'

import VueRouter from 'vue-router'
import router from './router' 

Vue.use(VueRouter)

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

new Vue({
    router,
    render: (h) => h(App)
}).$mount('#app')
複製代碼
<!--App.vue-->
<template>
    <div> <!--這個元素及其子元素會把index.html裏的#app替換掉 -->
        <router-view></router-view> <!--路由匹配的組件在此-->
    </div>
</template>
<script> export default { name: 'App', data () { return {} } } </script>
複製代碼
// router.js
import Router from 'vue-router'
// import navList from '@/router/nav.config.json' 
// 也能夠把路由寫成個json，供多處使用
const findPwd = () => import('../views/login/find_pwd.vue') // 懶加載，須要webpack配置動態import
const routes = [{
        path: '/find_pwd',
        component: findPwd,
        name: '找回密碼'
    }]
export default new Router({
  routes
})
複製代碼

這就能經過路由訪問了 http://localhost:8014/#/find_pwd

區分開發和生產環境配置webpack

1.新建一個文件夾build,放入3個webpack配置文件代替webpack.config.js，以下

build --webpack.base.conf.js
     |--webpack.dev.config.js
     |--webpack.prod.config.js
複製代碼

在webpack.base.conf.js
公共配置，包括對.vue, .css, .scss, 圖片，字體處理的loader，babel轉碼，css代碼提取，入口文件處理
在webpack.dev.config.js
配置devServer,eslint,html模板處理，output處理
webpack.prod.config.js
打包壓縮文件，splitChunks代碼分割提取，html模板處理，output處理, 代碼分析

process.env的NODE_ENV，由圖5設置

記錄剩餘要加的
style-loader 實現了HMR接口，可是這裏style-loader用mini-css-extract-plugin，因此這裏css熱加載不行
加個postCss
加tree-shaking配置
改成多入口

2.修改包描述文件的命令

"scripts": {
    "build": "webpack --config build/webpack.prod.conf.js",
    "dev": "webpack-dev-server --config build/webpack.dev.conf.js --inline --hot"
  },
複製代碼

用npm run build 雖然能打包成功，可是運行時報錯，說沒找到Vue。
我打開依賴包裏的vue，發現主入口是dist/vue.runtime.common.js(運行版vue)，
如圖6, 由於vue-loader+render才能用運行版，後面再優化
index.html裏的BASE_URL?

先用完整版的vue
因此改了main.js裏的引入 

import Vue from '../node_modules/vue/dist/vue.js'
複製代碼

果真打包的靜態文件也能夠運行了 我還沒寫完

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程