技術標籤：jsnpmwebpack

webpack.config.js配置

// 如果需要 可以在package.json的script中進行更改配置
const path = require("path");   //webpack output必須要求絕對路徑
const webpack = require("webpack");   //匯入webpack
const HtmlWebPackPlugin = require("html-webpack-plugin");   //Html 打包外掛  npm install --save-dev html-webpack-plugin
 

const uglifyjsWebPackPlugin = require("uglifyjs-webpack-plugin")  //js 打包外掛
module.exports = {
  entry: "./src/main.js",   //入口檔案
  output: {   //輸出配置
    path: path.resolve(__dirname, 'dist'),   //輸出路徑
    filename: "bundle.js",   //檔名  
    publicPath: "/dist/"     //專案中引入靜態資源（js、css）時的基礎路徑
 

  },
  module: {
    rules: [   //打包規則
      {
        test: /\.css$/,  //.css
        use: ["style-loader","css-loader"]    
      },
      {
        test: /\.less$/,  //.less
        use: [{
          loader: "style-loader"
        },{
          loader: "css-loader"
        }
 
,{
          loader: "less-loader"
        }]
      },
      {
        test:/\.(png|jpg|gif)$/,  //.png .jpg .gif
        use: [
          {
            loader: "url-loader",
            options: {
            //當載入圖片小於limit時,會將圖片編譯成base64字串的形式,
            //當載入圖片大於limit時,需要使用file-loader 
              limit: 8192,
              name: "img/[name].[hash:8].[ext]"
            },
            
          }
        ]
      },
      {
        test: /\.js$/,   //.js
        // exclude : 排除
        // include : 包含
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",   
          options: {
            // presets: ["@babel/preset-env"]
            presets: ["es2015"]   //es6=>es5
          }
        }
      },
      {
        test: /\.vue$/,   //.vue
        use: ["vue-loader"],
      
      }
    ],
    
  },
  resolve: {  // Resolve 配置 Webpack 如何尋找模組所對應的檔案
    // alias: 別名
    // git commit -m "註釋"
    // 省略字尾名的配置 import
    // 能夠使使用者在引入模組時不帶擴充套件： import File from '../path/to/file';
    extensions: [".js",".vue",".css"], //自動解析確定的拓展  預設為  extensions: ['.wasm', '.mjs', '.js', '.json']
    alias: {
      "vue$": "vue/dist/vue.esm.js",   //通過別名來把原匯入路徑對映成一個新的匯入路徑 在末尾加上$代表精確匹配
      "@Utils": path.resolve(__dirname,"src/utils")
      // import utils from '../../../js/utils'
      // import Button from '@Utils/utils'
    } 
  },
  plugins: [
    //HtmlWebpackPlugin這個外掛的作用是依據一個簡單的index.html模板，
    //生成一個自動引用你打包後的JS檔案的新index.html。
    //這在每次生成的js檔名稱不同時非常有用（比如添加了hash值）
    /* 
    Hot Module Replacement Hot Module Replacement（HMR）也是webpack裡很有用的一個外掛，
    它允許你在修改元件程式碼後，自動重新整理實時預覽修改後的效果。
    */
    new webpack.BannerPlugin("最終版權歸@MaxLoong所有"),   //內部外掛
    new HtmlWebPackPlugin({
      template: "index.js"
    }),
    new uglifyjsWebPackPlugin()
  ],
  devServer: {   //搭建本地伺服器
    contentBase: "./dist",
    inline: true   //實時監聽
  }
}

`