Vue+webpack從零搭建工程項目

時間 2020-06-03

標籤 vue+webpack vue webpack 搭建工程項目简体版

原文原文鏈接

基礎項目搭建

準備工做css

# vscode 打開命令行
ctrl + `(esc下面的鍵)
# 在目錄下面,初始化一個 npm項目
npm init
# 安裝庫
npm i webpack vue vue-loader
# 根據提示安裝其餘的庫
npm i css-loader
npm i vue-template-compiler

項目目錄介紹html

dist //將打包的資源輸出目錄
node_modules // 安裝的庫目錄
src // 源碼目錄
	app.vue // vue初始組件
    index.js //入口文件
package.json //項目配置信息文件,在用 npm init命令後生成
webpack-config.js //webpack打包配置文件

app.vuevue

// html代碼
<template>
    <div class="title"> {{text}}</div>
</template>

// js代碼
<script>
export default {
    data(){
        return{
            text :"hello world"
        }
    }
}
</script>
// css代碼
<style>
.title{
    color: red;
}

</style>

index.jsnode

// 將組件掛載到vue當中
import Vue from 'vue'

import App from './app.vue'
// 將 vue組件掛載到一個 root節點中
const root = document.createElement('div')
document.body.appendChild(root)

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

webpack.config.js 打包配置webpack

// webpack打包資源的配置 圖片,js,html等
// node.js基礎包
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports={
    //程序入口文件,將當前的目錄與後面的地址拼接
    entry:path.join(__dirname,'src/index.js'),
    //輸出路徑,webpack將 vue等信息打包爲一個能夠在瀏覽器運行的js文件
    output:{
        filename:'bundle.js',
        path:path.joinnpm i style-loader url-loader file-loader(__dirname,'dist')
    },
     plugins: [
    // make sure to include the plugin for the magic
    new VueLoaderPlugin()
],
    // 指定用什麼處理 vue文件, webpack不能處理 vue文件
     module:{
    rules:[
        {
            test:/.vue$/,
            loader:'vue-loader'
        }
    ]
}
}

package.jsones6

{
  "name": "todolist",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "css-loader": "^2.1.0",
    "vue": "^2.5.21",
    "vue-loader": "^15.4.2",
    "webpack": "^4.28.2"
  }
}

tips: 須要在此處配置,使用項目中的webpack ,在命令行中執行用的是全局的 webpack "build":"webpack --config webapck.config.js"web

編譯npm

npm run build
# 編譯時可能提示須要安裝庫安裝便可
# npm install -D webpack-cli

編譯問題json

You may need an appropriate loader to handle this file type.?
webpack只能處理js es5的文件,對 vue類型的文件,不能處理,咱們須要手動指定處理規則

查看 bunde.js代碼,在這個其實有 vue代碼, webpack 作的就是把靜態資源打包成 js文件,便於瀏覽器處理瀏覽器

webpack靜態資源的處理

安裝庫

npm i style-loader url-loader file-loader
 npm i stylus stylus-loader

配置信息

// webpack打包資源的配置 圖片,js,html等

// node.js基礎包
const path = require('path')

const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports={
    //程序入口文件,將當前的目錄與後面的地址拼接
    entry:path.join(__dirname,'src/index.js'),
    //輸出路徑,webpack將 vue等信息打包爲一個能夠在瀏覽器運行的js文件
    output:{
        filename:'bundle.js',
        path:path.join(__dirname,'dist')
    },
    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin()
    ],
    module:{
        rules:[
            {
                // 指定vue-loader處理 vue文件, 處理 vue文件
                test:/\.vue$/,
                loader:'vue-loader'
            },
            {
                //處理 css 
                test:/\.css$/,
                // 使用css-loader讀取內容,用 style-loader處理css寫入到html代碼中去
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                // css 預處理文件
                test:/\.styl/,
                use:[
                    'style-loader',
                    'css-loader',
                    'stylus-loader'
                ]
            },
            {   
                // 圖片處理的 loader
                test:/\.(gif|jpg|jpeg|png|svg)$/,
                use:[
                    {
                        // 使用 url-loader(依賴於file-loader)處理 圖片資源,options是要給url-loader傳遞的參數
                        loader:'url-loader',
                        options:{
                            // 若是文件的大小小於1024kb,將將其轉換爲base64代碼,存入html中
                            limit:1024,
                            // 輸出圖片原先的名字
                            name:'[name]-rao.[ext]'
                        }
                    }
                ]
            }
        ]
    }
}

那麼配置以後,就能夠在js代碼中 import 非js內容. index.js文件

// 引入非js.代碼
import Vue from 'vue'
import App from './app.vue'
import './assets/styles/todo.css'
import './assets/images/todo.png'
import './assets/styles/todo-stylus.styl'
// 將 vue組件掛載到一個 root節點中
const root = document.createElement('div')
document.body.appendChild(root)

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

webpack-dev-server的配置和使用

安裝庫

// 開發服務器
npm i webpack-dev-server
// 環境的切換 適應不一樣的平臺
npm i cross-env
// html插件
npm i html-webpack-plugin

在 package.json配置 dev-server

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
  },

webpack.cofig.js配置

// webpack打包資源的配置 圖片,js,html等

// node.js基礎包
const path = require('path')

const VueLoaderPlugin = require('vue-loader/lib/plugin');

const HTMLPlugin = require('html-webpack-plugin')

const webpack = require('webpack')
// 設置的環境變量存儲在 process.env中
const isDev = process.env.NODE_ENV==='development'

const config ={
    // 指定webpack的編譯目標是web平臺
    target:'web',
    //程序入口文件,將當前的目錄與後面的地址拼接
    entry:path.join(__dirname,'src/index.js'),
    //輸出路徑,webpack將 vue等信息打包爲一個能夠在瀏覽器運行的js文件
    output:{
        filename:'bundle.js',
        path:path.join(__dirname,'dist')
    },
    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin(),

        new HTMLPlugin(),

        // 定義一個環境變量 在這裏定義了,在js代碼中能夠直接使用
        new webpack.DefinePlugin({
            'process.env':{
                NODE_ENV:isDev ?'"development"':'"production"'
            }
        })
    ],
    module:{
        rules:[
            {
                // 指定vue-loader處理 vue文件, 處理 vue文件
                test:/\.vue$/,
                loader:'vue-loader'
            },
            {
                //處理 css 
                test:/\.css$/,
                // 使用css-loader讀取內容,用 style-loader處理css寫入到html代碼中去
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                // css 預處理文件
                test:/\.styl/,
                use:[
                    'style-loader',
                    'css-loader',
                    'stylus-loader'
                ]
            },
            {   
                // 圖片處理的 loader
                test:/\.(gif|jpg|jpeg|png|svg)$/,
                use:[
                    {
                        // 使用 url-loader(依賴於file-loader)處理 圖片資源,options是要給url-loader傳遞的參數
                        loader:'url-loader',
                        options:{
                            // 若是文件的大小小於1024kb,將將其轉換爲base64代碼,存入html中
                            limit:1024,
                            // 輸出圖片原先的名字
                            name:'[name]-rao.[ext]'
                        }
                    }
                ]
            }
        ]
    }
}

// 環境切換的判斷
if (isDev){
    // webpack打包後的js是轉移的(如es6轉程es5),在出錯後很差定位,須要把轉換後的js代碼映射,這樣我門
    // 查看錯誤的時候,仍是咱們編寫代碼樣式,便於定位
    config.devtool ="#cheap-module-eval-source-map"
    // 開發環境配置
    config.devServer= {
        port:'8001',
        // 設置成 0.0.0.0能夠經過 localhost,127.0.0.1,本機ip進行訪問
        host:'0.0.0.0',
        //若是有錯直接顯示在網頁上面
        overlay:{
            errors:true
        },
        // // 將server不理解的地址,映射首頁
        // historyFallback:{

        // },
        //在啓動的時候自動打開瀏覽器
        open:true,
        // 只渲染當前組件的效果,不會整個項目從新渲染
        hot:true
    }
    config.plugins.push(
        // 熱加載須要的插件
        new webpack.HotModuleReplacementPlugin(),
        // 過濾一些不須要的信息
        new webpack.NoEmitOnErrorsPlugin()
    )
}

module.exports =config

配置vue的jsx寫法和 postcss

安裝庫,在安裝過程當中可能提示缺乏庫,根據提示安裝便可

npm i postcss-loader autoprefixer babel-loader babel-core 
    npm i babel-preset-env babel-plugin-transform-vue-jsx

tps:jsx就是把html代碼寫在js中,相比vue可能更加的靈活項目目錄下新建文件

// babe使用
.babelrc
// postcss使用
postcss.config.js

.babelrc文件

{
    "presets": [
        "env"
    ],
    "plugins": [
        "transform-vue-jsx" // 處理 vue中的jsx
    ]
}

webpack.congif.js配置處理 jsx

{
       // 處理 jsx 文件
       test:/\.jsx/,
       loader:'babel-loader'
},
...
{
                // css 預處理文件
                test:/\.styl/,
                use:[
                    'style-loader',
                    'css-loader',
                    'stylus-loader',
                    {
                        loader:'postcss-loader',
                        // stylus-loader會生成sourcemap ,而postcss-loader也會生成sourcemanp,該項配置直接使用前面的sourcemap
                        options:{
                            sourceMap:true,
                        }
                    }
                ]
     },

打包的配置

css單獨分離打包和 vue等類庫單獨打包

// 安裝插件
npm i extract-text-webpack-plugin

webpack.config.js配置

// 環境切換的判斷
if (isDev) {
    // 開發環境使用的 styl樣式
    config.module.rules.push({
        // css 預處理文件
        test: /\.styl/,
        use: [
            "style-loader",
            "css-loader",
            "stylus-loader",
            {
                loader: "postcss-loader",
                // stylus-loader會生成sourcemap ,而postcss-loader也會生成sourcemanp,該項配置直接使用前面的sourcemap
                options: {
                    sourceMap: true
                }
            }
        ]
    });

    // webpack打包後的js是轉移的(如es6轉程es5),在出錯後很差定位,須要把轉換後的js代碼映射,這樣我門
    // 查看錯誤的時候,仍是咱們編寫代碼樣式,便於定位
    config.devtool = "#cheap-module-eval-source-map";
    // 開發環境配置
    config.devServer = {
        port: "8002",
        // 設置成 0.0.0.0能夠經過 localhost,127.0.0.1,本機ip進行訪問
        host: "0.0.0.0",
        //若是有錯直接顯示在網頁上面
        overlay: {
            errors: true
        },
        // // 將server不理解的地址,映射首頁
        // historyFallback:{

        // },
        //在啓動的時候自動打開瀏覽器
        open: true,
        // 只渲染當前組件的效果,不會整個項目從新渲染
        hot: true
    };
    config.plugins.push(
        // 熱加載須要的插件
        new webpack.HotModuleReplacementPlugin(),
        // 過濾一些不須要的信息
        new webpack.NoEmitOnErrorsPlugin()
    );
} else {
    //配置入口文件 ,將類庫單獨打包
    config.entry = {
        app: path.join(__dirname, "src/index.js"),
        // 要單獨打包的庫文件
        vendor: ['vue']
    }

    //正式環境必須爲 chunkhash
    config.output.filename = '[name].[chunkhash:8].js'

    // 正式環境處理 css樣式,單獨打包爲一個靜態文件
    config.module.rules.push({
        // css 預處理文件
        test: /\.styl/,
        use: ExtractPlugin.extract({
            fallback: "style-loader",
            use: [
                "css-loader",
                "stylus-loader",
                {
                    loader: "postcss-loader",
                    // stylus-loader會生成sourcemap ,而postcss-loader也會生成sourcemanp,該項配置直接使用前面的sourcemap
                    options: {
                        sourceMap: true
                    }
                }
            ]
        })
    });

    config.plugins.push(

        //輸出 css文件的名稱
        //new ExtractPlugin('styles.[contentHash:8].css')

        // 這個插件與 webpack存在兼容問題,這個是臨時解決方案
        new ExtractPlugin('styles.[chunkhash:8].css'),

        //單獨打包類庫文件 webpack存在兼容問題,須要注意版本 ,使用下面optimization方式進行配置
        // new webpack.optimize.CommonsChunkPlugin({
        //     //注意與上面配置name 一致
        //     name :'vendor'
        // })
        //將 webpack配置的代碼單獨打包爲一個文件,注意必須在單獨打包庫文件後面
       // new webpack.optimize.commonsChunkPlugin({
         //   name:"runtime"
       // })
    )

    // https://webpack.js.org/plugins/split-chunks-plugin/
    config.optimization={
        runtimeChunk: {
            name: "manifest"
        },
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendor",
                    chunks: "all"
                }
            }
        }
    }


}

module.exports = config;

webpack區分打包類庫代碼及hash優化類庫的代碼通常比較穩定,但願能夠長時緩存在瀏覽器,避免跟業務代碼合併在一塊兒

tips:hash和chunkhash的區別, hash方法打包出來的是項目的hash名稱是同樣的, chunkhash是單獨模塊的hash,是不同的