9102年webpack4搭建vue專案(二)

無畏發表於2019-04-29

前言

距離上篇文章9102年webpack4搭建vue專案已經過了將近兩個月了,一直沒有時間寫文章,公司專案比較多,這兩個月一直在加班,所以呢,所以呢,直到今天才能給大家分享文章,想看上篇文章的同學點這裡juejin.im/post/5c665d…

好了廢話不多說開始擼程式碼。

1.新建資料夾

mkdir wepack-vue //檔名字可以隨便複製程式碼

2.新建package.json檔案

npm init -y複製程式碼

3.webpack配置

新建build資料夾

mkdir build複製程式碼

build資料夾新建webpack.base.conf.js,webpack.dev.conf.js,webpack.prod.conf.js

  • webpack.base.conf.js 存放公共配置
  • webpack.prod.conf.js 存放生產環境配置
  • webpack.dev.conf.js 存放開發環境配置

建立src資料夾並建立main.js

建立index.html

<!DOCTYPE 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>webpack搭建vue專案</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>複製程式碼

下載webpack webpack-dev-server webpack-cli

npm i webpack webpack-dev-server webpack-cli -D複製程式碼

開啟webpack.base.config.js,並配置webpack整體屬性

var path = require('path');
var webpack = require('webpack');
module.exports = {
    entry: {
        main: path.resolve(__dirname, '../src/main.js')
    },
    output: {
        path: path.resolve(__dirname, '../src'),
        filname: '[name].[bash].js',
    },
    module: {
        rules: []
    },
    pligins: [
                new webpack.HashedModuleIdsPlugin(), // 解決vender後面的hash每次都改變
             ],
    resolve: {

    }
}複製程式碼

4.配置loader

  • 下載babel-loader,babel-core,babel-preset-dev,rules並配置js

babel-preset-env 幫助我們配置 babel。我們只需要告訴它我們要相容的情況(目標執行環境),它就會自動把程式碼轉換為相容對應環境的程式碼。

babel-core是作為babel的核心存在,babel的核心api都在這個模組裡面

tips: babel是7.X的話babel-core必須是6.X,否則不相容

npm i babel-loader babel-core babel-preset-env@7 -D複製程式碼

rules:[
    {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: /node_modules/
    }
]複製程式碼
  • 新建.babelrc檔案,.babelrc是babel全域性配置檔案

{
    "preset": [
                ['env',{
                        "targets":  {// 指定轉譯到那個環境
                            //瀏覽器環境                            
                            "browsers": ["> 1%", "last 2 versions", "not ie <= 8"],
                        },
                        //是否將ES6的模組化語法轉譯成其他型別
                        "modules": false
                 }]
            ]
}複製程式碼

  • 下載file-loader,rules並配置檔案(圖片和字型)

npm i file-loader -D複製程式碼

rules:[
    {
        test: /\.(jpg|png|svg|gif)$/,
        use: ['file-loader']
    },
  {
        test: '/\.(woff|woff2|eot|ttf|otf)$/',
        use: ['file-loader']
   },]複製程式碼
  • 下載css-loader,vue-style-loader,sass-loader, node-sass,並配置css,scss,sass

npm i css-loader vue-style-loader sass-loader node-sass -D複製程式碼

rules:[
    {
        test: /\.(sa|sc|c)ss$/,
        use: [
                {loader: 'vue-style-loader'},
                'css-loader',
                'sass-loader'
              ]
    },
  ]複製程式碼

  • 下載less,less-loader,並配置less

npm i less-loader less -D複製程式碼

rules:[
    {
        test: /\.less$/,
        use: [
                {loader: 'vue-style-loader'},
                'css-loader',
                'less-loader'
              ]
    },
  ]複製程式碼

5.生成html檔案

  • 下載html-webpack-plugin,並配置

npm i html-webpack-plugin -D複製程式碼

// 引入html-webpack-plugin
var HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
    new HtmlWebpackPlugin({
        template: path.resolve(__diename, '../index.html')
    }),
]複製程式碼

6.配置解析模組

resolve: {
    // 能夠使使用者在引入模組時不帶擴充套件
    extensions: ['.js', '.json', '.vue', 'css']
}複製程式碼

base模組配置了一些東西但沒有配置完,會在後邊一點一點加上,接下來配置dev和prod

7.配置webpack.dev.conf

  • 下載 webpack-merge

npm i webpack-merge -D複製程式碼

  • webpack.dev.js

var merge = require('webpack-merge');
var baseConfig = require('./webpack.base.conf');
var path = require('path');
var webpack = reuire('webpack');
module.exports = merge(baseConfig, {
    devtool: 'inline-source-map', // 壓縮方式
    mode: 'development'
    devServer: {
     hot: true, // 熱更新
     open: true, // 自動開啟頁面
     contentBase: path.resolve(__dirname, '../dist'), // 告訴服務從哪提供內容
    },
    plugins: [
        new.webpack.HotModuleReplacementPlugin(), //開啟熱更新
    ]
})複製程式碼

8.配置webpack.prod.conf

  • webpack.prod.conf.js

var merge = require('webpack-merge');
var baseConfig = require('./webpack.base.conf');
var path = require('path');
var webpack = reuire('webpack');
module.exports = merge(baseConfig, {
    devtool: 'source-map', // 壓縮方式
    mode: 'production'
    plugins: [
    ]
})複製程式碼

9.配置vue-loader

  • 下載vue-loader,vue,vue-template-compiler, 並配置vue解析檔案,配置webpack.base.cond.js

npm i vue vue-loader vue-template-compiler -D
複製程式碼

var VueLoaderPlugin = require('vue-loader/lib/plugin');
// 省略程式碼......
rules:[
    {
        test: /\.vue$/,
        use: ['vue-loader'],
        exclude: /node_modules/
    },
  ]
// 省略程式碼.......複製程式碼

// 省略程式碼....
plugins: [
    new VueLoaderPlugin(), // 它的職責是將你定義過的其它規則複製並應用到 .vue 檔案裡相應語言的塊
]
// 省略程式碼...複製程式碼

  • 配置vue別名,確保webpack可以找到.vue檔案

// 省略程式碼...
reslove: {
    alias: [
        'vue$': 'vue/dist/vue.esm.js', //配置別名 確保webpack可以找到.vue檔案
        '@': path.resolve(__dirname, '../src')
    ]
}複製程式碼

  • 新建App.vue檔案

<template>
    <div>{{str}}</div>
</template>
<script>
export default {
  name: 'App',
  data () {
    return {
      str: 'hello'
    }
  }}
</script>
<style>
div {
  color: red;
}
</style>
複製程式碼

  • 在main.js中引入vue

import VUe from 'vue'
import App from './App'

new Vue({
    el: "#app",
    render: (h) => h(App)
})複製程式碼

10.配置命令

  • 找到package.json檔案,並配置開發和打包命令

// 省略程式碼。。。
"scripts": {
  "dev": "webpack-dev-server  --progress --config build/webpack.dev.conf.js",
   "build": "webpack --config build/webpack.prod.conf.js"
  }複製程式碼

  • 執行專案

npm run dev複製程式碼

可以看到專案已經跑起來了

9102年webpack4搭建vue專案(二)

11. 區分環境引入不同地址

  • 新建config資料夾並新建dev.ev.js和prod.env.js

dev.env.js 開發環境配置

'use strict'

module.exports = {
    NODE_ENV: '"development"',
    BASE_API: '"http://1456"',
}複製程式碼

prod.env.js 生產環境配置

'use strict'

module.exports = {
    NODE_ENV: '"production"',    BASE_API: '"http://123.com"',
}複製程式碼

12.優化webpack配置

  • 解決更改檔案打包時dist檔案沒有清除,再次打包。

下載clean-webpack-plugin,並配置webpack.prod.conf.js檔案

npm i clean-webpack-plugin -D複製程式碼

// 引入clean-webpack-plugin
var CleanWebpackPlugin = require('clean-webpack-plugin');
// 省略程式碼。。。。
plugins: [
    new CleanWebPackPlugin();
]複製程式碼

  • 根據不同環境提取css

下載mini-css-extract-plugin,並配置webpack.prod.conf.js檔案

npm i mini-css-extract-plugin -D複製程式碼

更改webpack.prod.conf.js中使用vue-style-loader的程式碼,更改為

 module: {
        rules: [
            {
                test: /\.(c|sc|sa)ss$/,
                use: [
                  {
                    loader: MiniCssExtractPlugin.loader,
                  },
                  'css-loader',
                  'sass-loader'
                ]
            },
            {
            test: /\.less$/,
            use: [
                {
                loader: MiniCssExtractPlugin.loader,
                },
                'css-loader',
                'less-loader'
                ]
            }
        ]
    },
複製程式碼

在webpack.prod.conf.js的plugin中配置

new MiniCssExtractPlugin({
    filename: '[name].[hash].js'
})複製程式碼

webpack.base.conf.js中刪除使用vue-style-loader的程式碼,並在webpack.dev.conf.js中定義

  module: {
    rules: [
      {
        test: /\.(c|sc|sa)ss$/,
        use: [
          {
            loader: 'vue-style-loader',
          },
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: 'vue-style-loader',
          },
          'css-loader',
          'less-loader'
         ]
      }
    ]
  },複製程式碼

這個配置vue-loader中有提到vue-loader.vuejs.org/zh/guide/ex…

  • 第三方庫單獨打包

把依賴的第三方庫抽取出來單獨打包,加快打包進度

下載autodll-webpack-plugin

npm i autodll-webpack-plugin -D複製程式碼

在webpack.base.conf.js中配置

var AutodllWebpackpackPlugin = require('autodll-webpack-plugin');
plugins: [
    new AutodllWebpackpackPlugin ({
        inject: true,
        debugger: true,
        filename: '[name].js',
        path: './dll',
        entry: {
            vendor: ['vue']
        }
    })
]複製程式碼

tips: inject 為 true,外掛會自動把打包出來的第三方庫檔案插入到 HTML。filename 是打包後檔案的名稱。path 是打包後的路徑。entry 是入口,vendor 是你指定的名稱,陣列內容就是要打包的第三方庫的名稱,不要寫全路徑,Webpack 會自動去 node_modules 中找到的。
  • 提取公共程式碼

在 webpack.base.conf.js的 plugins 屬性中新增如下外掛物件

new webpack.optimize.SplitChunksPlugin()複製程式碼
  • 打包時壓縮js和css

下載optimize-css-assets-webpack-plugin和uglifyjs-webpack-plugin

npm i uglifyjs-webpack-plugin uglifyjs-webpack-plugin -D複製程式碼

在webpack.prod.conf.js中分別引入optimize-css-assets-webpack-plugin和uglifyjs-webpack-plugin並增加optimization

var OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
var UglifyJsPlugin = require("uglifyjs-webpack-plugin");
// ...省略號 
    optimization: {
                minimizer: [
          // 壓縮JS
          new UglifyJsPlugin({
            uglifyOptions: {
              compress: {
                warnings: false, // 去除警告
                drop_debugger: true, // 去除debugger
                drop_console: true // 去除console.log
              },
            },
            cache: true, // 開啟快取
            parallel: true, // 平行壓縮
            sourceMap: false // set to true if you want JS source maps
          }),
          // 壓縮css
          new OptimizeCSSAssetsPlugin({})
        ]
    },複製程式碼

  • css自動加字首

下載postcss-loader 和autoprefixer

npm i postcss-loader autoprefixer -D複製程式碼

分別在webpack.dev.conf.js和webpack.prod.conf.js的use中新增postcss-loader

use: [
    'postcss-loader'
]複製程式碼

在專案下增加postcss.config.js

// 配置cssz加字首
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}複製程式碼

以上配置的專案就可以跑起來了,謝謝大家,如有錯誤,敬請指出,一起在碼農的道路上越走越遠

感恩騙點star專案地址github.com/mr-mengbo/w…

佔位

下一篇會介紹vue搭建後臺專案




相關文章