webpack配置Plugin/配置檔案分離

407指導員發表於2020-12-30

webpack配置Plugin

配置版權資訊（自帶）

匯入webpack模組在webpack.config.js裡

/*匯入webpack*/
const webpack = require('webpack');

在model.exports裡配置

/*配置外掛*/
plugins:[
    new webpack.BannerPlugin('最總版權歸lcq所有'),
]

打包index.html檔案（HtmlWebpackPlugin）

在這裡插入圖片描述

安裝外掛

npm install html-webpack-plugin@3.2.0 --save-dev

然後 npm run build，就會在dist資料夾下出現index.html檔案自動引入bundle.js檔案

之前配置的 publicPath: 'dist/'現在要去掉，自動會打包到此資料夾下。

然後需要給dist下的index.html新增模板自定義html模板

在plugins裡新增
new HtmlWebpackPlugin({
  template:'index.html',
})

js壓縮外掛（uglifyjs:醜化js）

將js檔案進行壓縮

先安裝外掛

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

在webpack.config.js配置檔案中引入外掛,並且在plugins裡初始化外掛

/*引入壓縮js外掛*/
const  UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');

new UglifyjsWebpackPlugin()

和宣告版權外掛衝突

webpack-dev-server搭建本地伺服器

在這裡插入圖片描述

首先安裝

npm install --save-dev webpack-dev-server@2.9.1

在webpack-config.js裡配置

/*配置webpack-dev-server*/
devServer: {
  /*用於服務的資料夾*/
  contentBase:'./dist',
  inline:true,//用於實時監聽
}

啟動伺服器

webpack-dev-server

直接輸入該命令，提示會這不是內部命令。

之前說過，如果直接使用webpack會執行全域性的webpack，此地我們的安裝是區域性的，肯定報錯

在pack.json裡配置命令

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",
  "dev": "webpack-dev-server"
},

執行npm run dev

然後開啟預設地址：

http://localhost:8080/

然後修改html裡的程式碼，可以不用重新整理，實時反應到頁面

如果想執行 npm run dev後，自動開啟網頁，命令修改為

"dev": "webpack-dev-server --open"

webpack檔案的分離

將整個webpack.config.js分成三個js檔案。base.js為基礎配置檔案，dev.js執行時時配置檔案，prod.js為開發時配置檔案。這樣開發時就是用prod.js加base.js,釋出時使用dev.js加base.js

首先安裝

npm install webpack-merge@4.1.5

安裝之後可以對配置檔案進行合併

匯入WebpackMerge

/*匯入webpackmerge*/
const WebpackMerge = require('webpack-merge');

原始的webpack.config.js

/*匯入path模組*/
const path = require('path');
/*匯入webpack*/
const webpack = require('webpack');
/*匯入html-webpack-plugin*/
const HtmlWebpackPlugin = require('html-webpack-plugin');
/*引入壓縮js外掛*/
const  UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  /*入口*/
  entry: './src/main.js',
  /*出口*/
  output: {
    /*絕對路徑，動態獲取,第一個引數獲取當前檔案所在路徑，我們要放到dist資料夾下*/
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    //publicPath: 'dist/'
  },
  module: {
    rules: [
      /*配置css*/
      {
        test: /\.css$/,
        /*
        * css-loader只負責css檔案載入
        * style-loader負責將樣式加到DOM中
        * 使用多個loader,是從右向左讀的，先用的要放到右邊
        */
        use: ['style-loader', 'css-loader']
      },
      /*物件寫法,配置less*/
      {
        test: /\.less$/,
        use: [
          {
            loader: "style-loader" //creates style nodes from JS strings
          }, {
            loader: "css-loader" //translate css into CommonJS
          }, {
            loader: "less-loader" //complies Less to css
            /*還可以有options選項*/
          }
        ]
      },
      /*配置url*/
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            //當載入圖片，小於limit時，會將圖片編譯成base64字串形式
            //當載入圖片，大於limit時，會將圖片使用file-loader模組載入
            limit: 8192,
            name: 'img/[name].[hash:8].[ext]'
          }

        }]
      },
      /*配置es6轉es5*/
      {
        test: /\.js$/,
        /*排除以下資料夾轉換*/
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {

            presets: ['es2015']
          }
        }
      },
      /*配置vue-loader和vue-template-compiler*/
      {
        test: /\.vue$/,
        use: ['vue-loader']

      }
    ]
  },
  /*配置vue發行使用的版本*/
  resolve: {
    extensions: ['.js', '.css', '.vue'],
    /*alias:別名*/
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  /*配置外掛*/
  plugins: [
    new webpack.BannerPlugin('最總版權歸lcq所有'),
    new HtmlWebpackPlugin({
      template:'index.html',
    }),
      new UglifyjsWebpackPlugin(),
  ],
  /*配置webpack-dev-server*/
  devServer: {
    /*用於服務的資料夾*/
    contentBase:'./dist',
    inline:true,//用於實時監聽
  }


}

base.js

/*匯入path模組*/
const path = require('path');
module.exports = {
  /*入口*/
  entry: './src/main.js',
  /*出口*/
  output: {
    /*絕對路徑，動態獲取,第一個引數獲取當前檔案所在路徑，我們要放到dist資料夾下*/
    path: path.resolve(__dirname, '../dist'),
    filename: 'bundle.js',
    //publicPath: 'dist/'
  },
  module: {
    rules: [
      /*配置css*/
      {
        test: /\.css$/,
        /*
        * css-loader只負責css檔案載入
        * style-loader負責將樣式加到DOM中
        * 使用多個loader,是從右向左讀的，先用的要放到右邊
        */
        use: ['style-loader', 'css-loader']
      },
      /*物件寫法,配置less*/
      {
        test: /\.less$/,
        use: [
          {
            loader: "style-loader" //creates style nodes from JS strings
          }, {
            loader: "css-loader" //translate css into CommonJS
          }, {
            loader: "less-loader" //complies Less to css
            /*還可以有options選項*/
          }
        ]
      },
      /*配置url*/
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            //當載入圖片，小於limit時，會將圖片編譯成base64字串形式
            //當載入圖片，大於limit時，會將圖片使用file-loader模組載入
            limit: 8192,
            name: 'img/[name].[hash:8].[ext]'
          }

        }]
      },
      /*配置es6轉es5*/
      {
        test: /\.js$/,
        /*排除以下資料夾轉換*/
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {

            presets: ['es2015']
          }
        }
      },
      /*配置vue-loader和vue-template-compiler*/
      {
        test: /\.vue$/,
        use: ['vue-loader']

      }
    ]
  },
  /*配置vue發行使用的版本*/
  resolve: {
    extensions: ['.js', '.css', '.vue'],
    /*alias:別名*/
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }

}

prod.js

/*匯入webpack*/
const webpack = require('webpack');
/*匯入html-webpack-plugin*/
const HtmlWebpackPlugin = require('html-webpack-plugin');
/*引入壓縮js外掛*/
const  UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
/*匯入webpackmerge*/
const WebpackMerge = require('webpack-merge');
/*拿到base.js檔案*/
const baseConfig = require('./base.config');

module.exports = WebpackMerge(baseConfig,{
  /*配置外掛*/
  plugins: [
    new webpack.BannerPlugin('最總版權歸lcq所有'),
    new HtmlWebpackPlugin({
      template:'index.html',
    }),
    new UglifyjsWebpackPlugin(),
  ]



})

dev.js

/*匯入webpackmerge*/
const WebpackMerge = require('webpack-merge');
/*拿到base.js檔案*/
const baseConfig = require('./base.config');

module.exports = WebpackMerge(baseConfig,{
  /*配置webpack-dev-server*/
  devServer: {
    /*用於服務的資料夾*/
    contentBase:'./dist',
    inline:true,//用於實時監聽
  }


})

現在刪除了webpack.config.js後要修改package.json檔案
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/prod.config.js",
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"
  },
修改對應命令執行時對應的配置檔案路徑

使用WebpackMerge時，第一個引數是要合併的base.js然後下一個引數就是dev/prod對應的配置

之前配置的打包地址進行修改，因為配置檔案所在地址更改了

webpack（11）配置檔案分離為開發配置、生成配置和基礎配置
2021-07-13
Web
記一次Webpack配置檔案的分離
2018-11-29
Web
Webpack4.x 無分離配置
2018-12-27
Web
webpack 配置react腳手架配置檔案
2017-03-08
WebReact
Vue學習筆記之Webpack搭建本地伺服器及配置檔案的分離
2020-11-07
Vue筆記Web伺服器
html-webpack-plugin之配置自定義模板
2017-10-16
HTMLWebPlugin
vue-cli3打包後分離配置檔案
2019-02-16
Vue
php配置檔案與程式碼分離的實現思路
2017-11-12
PHP
babel webpack vue 配置檔案支援智慧提示
2020-06-15
BabelWebVue
簡單說說webpack的配置檔案
2018-05-09
Web
webpack多入口檔案頁面打包配置
2018-01-09
Web
VUE打包後配置配置檔案修改請求url方法及webpack打包的檔案生成同名檔案方法
2019-05-15
VueWeb
Springboot 打jar包分離lib，配置檔案正確方式
2018-10-22
Spring BootJAR
webpack4配置(1)-打包一個js檔案
2019-04-15
WebJS
Git配置配置檔案
2021-12-22
Git
Amoeba for MySQL讀寫分離配置
2014-11-12
MySql
?從零開始學習webpack系列二（配置檔案）
2020-04-06
Web
webpack配置
2021-09-09
Web
多頁專案的webpack配置
2018-07-21
Web
Mycat讀寫分離配置實踐
2017-09-04
SQL Server AlwaysOn讀寫分離配置
2017-06-13
SQLServer
mongodb配置檔案常用配置項
2018-12-25
MongoDB
apache 配置檔案的配置(轉)
2007-08-16
Apache
為什麼我們要做三份 Webpack 配置檔案
2017-09-28
Web
webpack的配置
2018-10-05
Web
8.4.4　配置檔案
2018-09-15
vim配置檔案
2018-07-15
Maven配置檔案
2020-12-28
Maven
配置檔案vimrc
2020-11-05
MySQL配置檔案
2023-09-12
MySql
shell配置檔案
2017-04-11
mysql 配置檔案
2018-04-21
MySql
WCF配置檔案
2014-05-07
bash配置檔案
2011-10-10
pch檔案配置
2016-05-19
nginx配置檔案
2024-05-01
Nginx
Maven 配置檔案
2024-09-06
Maven
Nginx 配置檔案
2024-10-16
Nginx