一、webpack基础配置

在项目根目录创建 webpack.config.js 文件，默认是这个文件名

1、loader安装

loader：webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源

一般的loader安装命令如下：

• -D: 安装在开发依赖中(打包时不会打包到bundle.js中)；
• -S: 安装在生产环境依赖中(会打包到bundle.js中)

// 安装webpack和webpack-cli，因为下面的loader和plugin需要这两个
npm i webpack webpack-cli -D
 
// 打包图片的url-loader
npm i url-loader file-loader -D
 
// 处理css、sass、less样式文件的loader
npm i css-loader style-loader -D
npm i sass fibers node-sass sass-loader -D
npm i less less-loader -D
 
// 将ES6等高级语法的js文件转化为ES5语法的js文件的loader
npm i babel-loader @babel/core @babel/preset-env -D

更多loader请查看 www.webpackjs.com/loaders/

2、plugin安装

 
// 该插件将CSS提取到单独的文件中。它为每个包含CSS的JS文件创建一个CSS文件。它支持CSS和SourceMap的按需加载。
npm install --save-dev mini-css-extract-plugin
 
// 到目前为止，我们已经将所有资产手动包含在index.html文件中，但是随着应用程序的增长，一旦您开始在文件名中使用散列并输出多个包，将很难继续index.html手动管理文件。但是，有一些插件可以简化此过程。
npm install --save-dev html-webpack-plugin
 
// 启动服务并支持热替换
npm i webpack-dev-server -D

更多plugin请查看 www.webpackjs.com/plugins

二、webpack.config.js配置

/**
 * webpack.config.js
 */

 //resolve用来拼接绝对路径的方法
 // __dirname node.js的变量，代表当前文件的绝对路径
 const path = require('path');
 const HTMLWebpackPlugin =require('html-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const webpack = require('webpack');
 
 const NODE_ENV = 'development'
 const devMode = NODE_ENV !== 'production';
 
 module.exports ={
   //模式。默认`production`，还可选择`development`，`none`
   mode: NODE_ENV, 
   //入口
   entry: __dirname + "/src/index.js",
   //输出
   output: {
     //输出文件名
     filename:'bundle.js',
     //输出路径  
     path:path.resolve(__dirname,'dist')
   },
  //开发服务器 devServer:用来自动化(自动编译,自动打开浏览器，自动刷新浏览器~~~)
  //特点：只会在内存中编译打包，不会有任何输出
  //启动devServer指令为：webpack-dev-server
  devServer:{
    contentBase:path.resolve(__dirname,'dist'),//自动构建目录，打包后的文件夹绝对路径
    //启动gzip压缩
    compress:true,
    //端口号
    port:3000,
    //自动打开浏览器
    open:true
  },
   
   //loader的配置
   module:{
     rules: [
      {
         //匹配css
         test: /\.css$/,
         use: [
           devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
           'css-loader' 
         ]
      },
      {
        test: /.(sa|sc|c)ss$/,
        use: [
          devMode ? "style-loader" : MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader",
        ],
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        //匹配图片
        test:/.(jpg|png|gif)$/,
        //安装 url-loader file-loader
        loader:'url-loader',
        options: {
          //图片大小小于8kb,就会被base64处理
          //优点：减少请求数量，减轻服务器压力
          //缺点：图片体积会更大，文件请求速度更慢。
          limit:8*1024,
          //url-loader默认使用ES6模块化解析，而html-loader引入图片时commonjs
          //解析时会出问题：[object Moudle]
          //解决：关闭url-loader的ES6模块化，使用commonjs解析
          esModule:false,
          //给图片重命名
          //[hash:10]取图片hash的前十位
          //[ext]取文件原来的扩展名
          name:'[hash:10].[ext]',
　　　　　 outputPath:'imgs'//配置输出路径
        }
      },
　　　 {
          //匹配其他文件
　　　　　 exclude:/\.(css|html|js|jpg|png|gif|less|sass)$/,
          loader:'file-loader',
          options:{
             name:'[hash:10].[ext]',
　　　　　　　outputPath:'media'//配置输出文件夹
          }
　　   },
      {
          //处理html文件的img图片
          test:/.html$/,
          loader:'html-loader'
      }
     ]
   },
   
   //插件的配置
   plugin: [
       new MiniCssExtractPlugin({
          // Options similar to the same options in webpackOptions.output
          filename: devMode ? '[name].css' : '[name].[hash].css',
          chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
       }),
       new webpack.DefinePlugin({
         'SERVICE_URL': JSON.stringify('https://127.0.0.1:8000')
       }),
       new HtmlWebpackPlugin({
          title: 'hello world',
          filename: "index.html",
          template: "./index.html"
       }),
   ], 
 }

  

三、packge.json

packge.json添加如下代码：

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