webpack4.0+vue+es6配置

時間  2019-11-06
標籤 webpack4.0+vue+es6 webpack vue 配置 简体版
原文   原文鏈接

用webpack4.0作更多事情css

上一篇webpack入門文章中，咱們學會了怎麼使用webpack搭建一個前端工程，瞭解了webpack的一些核心概念。可是webpack的功力遠不止如此，在本文中，咱們將學習如何使用webpack來作更多的事情，如何進行環境分離，如何配置es6，再配置vue，使用vue來進行開發。html

這篇文章是入門文章的延續，不太瞭解webpack的同窗能夠先從入門文章看起，按部就班。前端

開發與生產環境的分離

在實際開發中，會有許多環境，有 開發環境，生產環境，測試環境，預發環境....(因公司而異)。最多見的兩種是開發環境和生產環境。在不一樣的環境會有不少不一樣的配置。因此咱們須要把不一樣環境的配置文件從webpack.config.js文件中分離出來。vue

首先進行目錄的改造。首先安裝依賴,用於融合配置文件。node

npm install -D webpack-merge
複製代碼
webpack-demo
|- config
    |- webpack.base.js
    |- webpack.dev.js
    |- webpack.pro.js
|- package.json
|- src
    |- 略
複製代碼

webpack.base.jswebpack

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: path.resolve(__dirname,'./src/index.js'),
    },
    output: {
        filename: '[name].[hash].js',
        path: path.resolve(__dirname,'../dist'),
    },
    module: {
        rules:[
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            },{
                test: /\.(png|svg|jpg|gif)$/,
                use:{
                    loader:'url-loader',
                    options: {
                        limit: 8192,
                        name: 'images/[name].[ext]?[hash]'
                    }
                }
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:'WebpackTest'
        })
    ]
}
複製代碼

output文件名修改： 咱們須要對output的filename選項進行修改。在用戶訪問網頁以後，會加載dist包中的bundle.js，而且進行緩存。在咱們進行版本更新之後，若是加載文件名仍是bundle.js的話。瀏覽器不會拉去新的bundle.js資源，會直接使用瀏覽器緩存的資源。因此咱們須要將每次打包後的資源名都命名不一樣。[name].[hash].js會根據文件內容給每一個文件名加上惟一的哈希，這樣就不會出現重名文件了。git

開發環境(dev)

webpack.dev.jses6

const merge = require("webpack-merge");
const base = require("./webpack.base");
const webpack = require("webpack");

module.exports = merge(base ,{
    mode: 'development',
    devtool: 'source-map',
    devServer:{
        compress: true, //啓用壓縮
        port: 1207,     //端口
        open: false,    //自動打開瀏覽器
        hot: true
    },
    plugins:[
        new webpack.HotModuleReplacementPlugin()
    ]
})
複製代碼

首先介紹一下開發環境下咱們須要進行配置的幾點github

  • source-map：source-map在開發中的用處很大，在瀏覽器容許的代碼是通過編譯之後的代碼，在出現一些錯誤的時候，若是不使用source-map的時候，錯誤沒法定位到源代碼中。使用了source-map之後，能夠直接定位到錯誤出現的行。配置source-map只須要將devtool屬性配置爲source-map就能夠。
  • devserver配置:devserver屬性能夠對開發環境選項進行一些配置，好比：自動打開瀏覽器，服務端口號，熱更替，是否壓縮等。
  • 模塊熱更替(HotModuleReplacementPlugin): 模塊熱更替容許在更新各類模塊的時候，無需徹底刷新頁面，這個功能在開發環境中很是實用。最簡單的應用場景，你在寫一些樣式的時候，須要本身配置一些數據上去，這時候你須要調整字體大小。使用了模塊熱更替以後會頁面不用刷新就能夠看到效果，省去了從新配置數據。在開啓熱更替時，還須要對模塊熱更替插件進行配置，不然會報錯。

生產環境(pro)

const merge = require('webpack-merge');
const base = require("./webpack.base.js");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require("path");

module.exports = merge(base ,{
    mode: 'production',
    plugins: [
        new CleanWebpackPlugin(['dist'],{
            root: path.resolve(__dirname,'../'),
        })
    ],
})
複製代碼
  • clean-webpack-plugin：用於刪除文件，在每次打包時，dist文件夾都會出現新的文件，若是不進行刪除處理的話，會一直累加到dist文件夾裏面。因此這裏使用clean-webpack-plugin插件，每次打包的時候都會先刪除以前的dist文件。

模式(mode)

在入門篇中，咱們每次編譯後都會出現he 'mode' option has not been set的警告。這是webpack4新增的mode屬性，有兩種mode，development和production.web

  • development模式：
    • 將process.env.NODE_ENV的值設爲 development，過去須要經過webpack.DefinePlugin進行配置。
    • 提供註釋、開發階段的詳細錯誤日誌和提示。
  • production模式:
    • 將process.env.NODE_ENV的值設爲 production，過去須要經過webpack.DefinePlugin進行配置。
    • 開啓全部的優化代碼，壓縮插件UglifyJsPlugin，過去須要自行配置。
    • 去掉一些只在開發中運行的代碼。

process.env.NODE_ENV值用於再開發中進行環境判斷。

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config config/webpack.dev.js",
    "build": "webpack --config config/webpack.pro.js"
},
複製代碼

再對npm script進行修改，指定對應配置文件。

es6配置

下面咱們進行es6的配置，因爲es6未被全部瀏覽器全面支持，全部咱們在使用的時候還想須要將其轉換爲es5.主要用到的工具是babel，先進行babel依賴的安裝。

npm i -D @babel/core @babel/plugin-transform-runtime @babel/preset-env babel-loader
複製代碼

webpack.base.js

...略
module:{
    rulse:[
        ...略
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
        }
    ]
}
複製代碼

配置loader，這裏的exclde選項用於忽略一些文件(敲黑板)，減小webpack的處理量。/node_modules/都是已經轉好的文件。

新增.babelrc文件

webpack-demo
|- config
    |- 略
|- package.json
|- src
    |- 略
|- .babelrc
複製代碼
{
    "presets": ["@babel/preset-env"], 
    "plugins": ["@babel/plugin-transform-runtime"] 
}
複製代碼
  • presets(設定轉碼規則)：過去須要進行規則集指定，如今使用@babel/preset-env搭配@babel/core解決
  • plugins(插件)：transform-runtime 插件表示無論瀏覽器是否支持ES6，只要是ES6的語法，它都會進行轉碼成ES5

resolve

這些選項能設置模塊如何被解析。在vue開發中一般使用的@/xxx/xxx就是將@符號配置爲src目錄。這樣webpack就能快速的找到該路徑，這樣的配置不只能夠方便開發，並且能夠優化構建時間，減輕webpack的工做量。另外還能夠配置後綴名的自動補全。

resolve: {
    extensions: [ '.js', '.vue', '.scss', '.css'], //後綴名自動補全
    alias: {                                       //別名
        '@': path.resolve(__dirname, '../src'),
    }
},
複製代碼

vue配置

最後咱們進行vue的配置,先安裝依賴。

npm i -D vue vue-loader vue-style-loader vue-template-compiler
複製代碼
  • vue-loader是vue的loader,vue文件是一個SFC類文件，vue-loader會將其解析成爲三部分，template部分用於渲染視圖，js，style。
  • vue-style-loader用於處理vue-loader解析後的style.
  • vue-template-compiler用於處理解析解析後的template.

先進行目錄改造

webpack-demo
|- config
    |- 略
|- package.json
|- src
    |- components
        |- HelloWorld.vue
    |- views
        |- App.vue
    |- asset
        |- img.png
        |- style.css
    |- index.html
    |- index.js
|- .babelrc
|- package.json
複製代碼

webpack.base.js

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const ProgressBarPlugin = require('progress-bar-webpack-plugin');

module.exports = {
    ...略
    module:{
        rules:[
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "vue-style-loader",
                    "css-loader"
                ]
            },{
                test: /\.(png|svg|jpg|gif)$/,
                use:'url-loader',
                
            },{
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
            },{
                test:/\.vue$/,
                use: 'vue-loader'
            }
        ]
    },
    plugins:[
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            filename: './index.html',     //文件名
            template: './src/index.html', //模板文件
        })    
    ]
}
複製代碼

在這裏咱們還須要安裝VueLoaderPlugin(),而且須要進行HtmlWebpackPlugin的從新配置，咱們須要使用本身的template，由於必須建立一個div入口，將vue實例掛載在這上面。按原來方式使用該插件的話，沒法建立div入口。

index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpackStudy</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>
複製代碼

index.js

import Vue from 'vue'
import App from './views/APP'
import '@/asset/style'

new Vue({
    el:'#root',
    render: h => h(App)
})
複製代碼

HelloWorld.vue

<template>
    <div>
        <img src="../asset/img.png" alt="">
        <p>一塊兒學習前端吧</p>
    </div>
</template>

<script>
export default {

}
</script>

<style scoped>
p{
    font-size: 50px;
}
</style>
複製代碼

App.vue

<template>
  <div id="app">
    <hello-world></hello-world>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld'

export default {
  name: "App",
  components: {
    HelloWorld
  }
};
</script>
複製代碼
  • index.js依舊是咱們的webpack入口文件，咱們將css文件和APP.vue入口文件引入，進行vue實例化，掛載在root節點上（index.html文件的root節點）。
  • 而後就能夠開始組件開發啦。

小工具

當咱們的組件躲起來了之後，webpack 打包很是耗時，咱們來安裝一個ProgressBarPlugin來查看打包進度。

npm i -D progress-bar-webpack-plugin
複製代碼
plugins:[
    new ProgressBarPlugin()//打包進度條
]
複製代碼

github

源碼在個人github倉庫step2分支，但願可以幫助到你們。

END

webpack這個技能棧將會是前端工程師必備的，對於小白來講，剛開始可能會不太好理解，其實不用把他看到太難，就是文件從哪來到哪裏去的一個打包工具而已，咱們所作的只是把他的各個模塊的從哪來到哪去的問題配好，將每一部分都弄懂。接下來須要作的就是在此基礎上進行開發了。

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