webpack配置Plugin/配置檔案分離

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

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對應的配置

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

在這裡插入圖片描述

相關文章