二、Webpack 开发环境的基本配置

四、开发环境的基本配置

---

开发环境配置主要目的是为了能让代码正常运行

主要考虑以下几个方面：

• 打包样式资源 如： css/style/sass

  npm install css-loader -d
  npm install style-loader -d
  npm install sass-loader -d

• 打包 html 资源 如： html

  npm install html-webpack-plugin -d //插件

• 打包图片资源

  npm install url-loader -d //处理项目中的图片资源
  npm install file-loader -d //因为url-loader依赖于file-loader，所以需要同时下载file-loader
  npm install html-loader -d //处理html中引入图片时的路径处理，url-loader只能处理css中的图片,不能处理html中的图片

• 打包其他资源

  npm install file-loader -d

• devServer

  webpack提供的开发用来自动编译代码，相当于热更新，不需要每次改完代码后都执行webpack

  注：只会在内存中编译打包，不会输出，如果要输出，则还是需要执行webpack命令一下

//webpack.config.js文件

const { resolve } = require('path')  // resolve用来拼接绝对路径的方法
const HtmlWebpackPlugin = require('html-webpack-plugin') // 引用plugin

// webpack配置
module.exports = {
  entry: './src/js/index.js', // 入口起点
      
  output: {
    filename: 'js/build.js',  // 输出文件名
    path: resolve(__dirname, 'build'), // 输出路径，所有资源打包都会输出到这个文件夹下 __dirname代表当前文件的目录绝对路径
  },
    
  //loader配置 不同文件必须配置不同loader
  module: {
    rules: [
      {
        test: /\.css$/,     // 处理以css结尾的文件 正则匹配规则表示以css结尾的文件名，以下列loader打包转换此文件
        use: [              // use数组中loader执行顺序：从右到左，从下到上，依次执行(先执行css-loader)
            'style-loader', // style-loader：创建style标签，将js中的样式资源插入进去，添加到head中生效
            'css-loader'    // css-loader：将css文件变成commonjs模块加载到js中，里面内容是样式字符串
        ], 
      },
      {
        test: /\.(scss|sass)$/,  //处理scss或sass结尾的文件
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ],
      },
      {
        test: /\.(jpg|png|gif)$/, // 处理图片资源，但处理不了html中的img图片
        loader: 'url-loader',
        options: {
          // 图片大小小于8kb，就会被base64处理，优点：减少请求数量（减轻服务器压力），缺点：图片体积会更大（文件请求速度更慢）
          // base64在客户端本地解码所以会减少服务器压力，如果图片过大还采用base64编码会导致cpu调用率上升，网页加载时变卡
          limit: 8 * 1024, 
          // 给图片重命名，[hash:10]：取图片的hash的前10位，[ext]：取文件原来扩展名
          name: '[hash:10].[ext]',  
          // 关闭url-loader的es6模块化，使用commonjs解析，为了配合html-loader，让html中引用的图片也加载出来
          esModule: false, 
          outputPath: 'imgs',
        },
      },
      {
        test: /\.html$/,  // 处理html文件的图片资源
        loader: 'html-loader',
      },
      { 
        loader: 'file-loader', // 打包其他资源(除了html/js/css资源以外的资源)
        exclude: /\.(html|js|css|less|jpg|png|gif)/,  排除html|js|css|less|jpg|png|gif文件
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media',
        },
      },
    ],
  },
    
  // plugin 插件的配置
  plugins: [
    // 处理html文件
    new HtmlWebpackPlugin({ 
      // 复制./src/index.html文件，并自动引入打包输出的所有资源（JS/CSS）
      // 注：原index.html文件中不要引入任何资源文件，如果引入了会导致引用两次，会出错
      template: './src/index.html',
    }),
  ],
    
  
  // 开发服务器 devServer：用来自动化，不用每次修改后都重新输入webpack打包一遍（自动编译，自动打开浏览器，自动刷新浏览器）
  // 特点：只会在内存中编译打包，不会有任何输出（不会像之前那样在外面看到打包输出的build包，而是在内存中，关闭后会自动删除）
  // 启动devServer指令为：npx webpack-dev-server
  devServer: {
    // 项目构建后路径
    contentBase: resolve(__dirname, 'build'),
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 3000,
    //编译后, 自动打开浏览器
    open: true,
  },
    
  mode: 'development' // 开发模式
}


//如果要启动devServer，则执行命令npx webpack-dev-server