关于webpack的基本配置

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   //实时监听
  }
}

`

webpack实战（一）：真实项目中一个完整的webpack配置