webpack的安装与使用（一）

前言

最近发现大部分程序员对webpack的理解都基于各种框架给我们设置好的配置，没有去深入了解，包括我自己本身，于是打算自己分享一下自己学习webpack配置的过程。第一章节介绍了：

• webpack的安装
• webpack-dev-server的使用
• 编译css，scss文件
• 编译js文件
• 编译图片，字体文件

安装webpack

//安装
npm install webpack webpack-cli -D
//在项目根目录创建配置文件webpack.config.js
//也可以自定义配置文件名，例如开发环境一个webpack.dev.js，生产环境一个webpack.prod.js

// 执行打包命令
webpack  //这是使用默认配置文件
webpack --config webpack.prod.js //这是使用自定义配置文件

//webpack打包命令，一般配置在package.json文件的scripts参数中
{
  "name": "css",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack",
    "build": "webpack --config webpack.prod.js",
    "watch": "webpack --watch",
  }
}

监听文件变化，自动更新编译后的文件

// 第一种方法，利用watch，这种方法有一个弊端，需要手动刷新浏览器
// package.json
{
  "name": "css",
  "version": "1.0.0",
  "scripts": {
    "watch": "webpack --watch"
  }
}
// 第二种方法 使用webpack-dev-server
npm install webpack-dev-server -D
// package.json
{
  "name": "css",
  "version": "1.0.0",
  "scripts": {
    "dev": "webpack-dev-server --config webpack.dev.js --open"
  }
}
// 配置文件webpack.dev.js
const webpack = require('webpack')
const path = require('path')
module.exports = {
  plugins: [
    new webpack.HotModuleReplacementPlugin() //热替换插件
  ],
  devServer: {
    host: "0.0.0.0",// 可以用本地ip地址访问
    hot: true, //启用 webpack 的模块热替换特性
    open: true, //自动打开浏览器
    contentBase: path.join(__dirname, "dist"), //告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要。可以配置多个路径，用数组
    proxy: { // 配置跨域
      "/api": {
        target: "http://localhost:3000",
        pathRewrite: {"^/api" : ""}
      }
    }
  }
};

解析scss文件和css文件

• 编译后的css利用style标签插入到页面head中

// 安装 style-loader css-loader sass-loader node-sass后两个是编译scss文件的

npm install style-loader css-loader sass-loader node-sass -D
npm install html-webpack-plugin -D
// webpack.config.js

// 使用下面的@type注释，可以让vscode给你自动提示webpack的参数
/** @type {import('webpack').Configuration} */
// 根据模板html生成html
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path')
module.exports = {
  entry: "./src/main.js", // 入口文件
  mode: "development", // 开发模式
  output: {
    path: path.join(__dirname, 'dist'), //输出路径
    filename: "app.js",
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "index.html"),
      filename: "index.html"
    }),
  ],
};

• 把css文件单独提取出来，利用link引入到页面中

// 安装 css-loader sass-loader node-sass后两个是编译scss文件的
npm install css-loader sass-loader node-sass -D
npm install html-webpack-plugin -D
npm install mini-css-extract-plugin -D
npm install optimize-css-assets-webpack-plugin -D

// webpack.config.js

// 提取css为单独的css文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 减少css体积
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 根据模板html生成html
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path')
module.exports = {
  entry: "./src/main.js",
  mode: "development",
  output: {
    path: path.join(__dirname, 'dist'),
    filename: "app.js",
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          // "style-loader", 
          MiniCssExtractPlugin.loader,
          "css-loader", 
          "sass-loader"
        ],
      },
      {
        test: /\.css$/,
        use: [
          // "style-loader", 
          MiniCssExtractPlugin.loader,
          "css-loader"
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'index.css'
    }),
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.css$/g,
      cssProcessor: require('cssnano') // 用于优化\最小化CSS的CSS处理器
    }),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "index.html"),
      filename: "index.html"
    }),
  ],
};

解析js文件

// 安装babel插件
npm install babel-loader @babel/core @babel/preset-env -D
// 创建.babelrc文件
{
  "presets": [
      "@babel/preset-env"
  ]
}

// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path')

module.exports = {
	entry: './src/main.js',
	mode: 'development',
	output: {
		path: path.join(__dirname, 'dist'),
		filename:'app.js'
	},
	module: {
		rules: [
			{
				//文件后缀
				test: /\.js$/,
				use: "babel-loader",
				//不需要编译的文件
				exclude:/(node_modules)/
			}
		]
  },
  devtool: 'source-map', // 生成map文件，方便直接定位错误
	plugins:[
		new HtmlWebpackPlugin({
			template: path.join(__dirname, 'index.html'),
			filename: 'index.html',
			inject: true, // 打包后的js文件放到body最后面
			minify: false // 不压缩
		})
	]
}

解析图片字体文件

// 解析js里面的图片文件和css里面的字体文件
npm install file-loader -D
// 解析html里面的图片，视频文件
npm install html-withimg-loader -D

// webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
/** @type {import('webpack').Configuration} */
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'index.js'
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /.(png|jpg|gif|jpeg)$/,
        use:{
          loader: 'file-loader',
          options:{
            outputPath: 'img/', // 图片输出后的文件夹
            esModule: false // 配合html-withimg-loader插件用
          }
        }
      },
      {
        test: /.(woff|woff2|eot|ttf|otf|TTF)$/,
        use: 'file-loader'
      },
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /.js$/,
        use: 'babel-loader'
      },
      {
        test: /.(htm|html)$/,
        use: 'html-withimg-loader' // 让html里面引用的图片也可以编译到
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'index.html'),
      filename: 'index.html',
      inject: true,
      minify: false
    })
  ]
}