Webpack基础实例

webpack

初始化项目

mkdir blog
cd blog

npm init -y
npm install -save --dev webpack webpack-cli
npm install -save --dev style-loader css-loader  # 用于import css文件后，打包时使用
npm install -save --dev html-webpack-plugin  # 用于打包时，自动生成html
npm install -save --dev copy-webpack-plugin  # 复制文件到dist
npm install -save --dev babel-loader @babel/core @babel/preset-env # 低版本浏览器打包
npm install -save --dev terser-webpack-plugin # 压缩打包后的代码
npm install -save --dev webpack-dev-server # 开发时，修改后自动打包, package.json script
npm install -save --dev webpack-bundle-analyzer # webpack 可视化的打包分析工具
npm install -save --dev jest # 单元测试

# 或者使用yarn
# yarn init -y
# yarn add --dev webpack webpack-cli 
# yarn add --dev style-loader css-loader
# yarn add --dev html-webpack-plugin
# yarn add --dev babel-loader @babel/core @babel/preset-env
# yarn add --dev terser-webpack-plugin
# yarn add --dev webpack-dev-server
# yarn add --dev webpack-bundle-analyzer
# yarn add --dev jest

# 使用vscode 打开当前目录
code .

新建文件

index.js

import "css/style.css"; // 使用webpack定义的路径别名
import { listFoods } from "utils/data";
import bgImg from "img/bg.png";

const data = listFoods();
const ul = document.createElement("ul");
data.forEach((e, i) => {
  const li = document.createElement("li");
  li.innerText = e;
  ul.appendChid(li);
});
document.body.appendChild(ul);

// 把图片放到body的开头
const img = document.createElement("image");
img.src = bgImg;
document.body.prepend(img);

data.js

function listFoods() {
  return ["苹果", "香蕉", "草莓"];
}

export { listFoods };

新建 webpack.config.js文件

  webpack.config.js 是webpack打包的核心，其一切功能都通过此文件设置。可以设置环境、产物、组件、loader解析器等。
  entry的单页面则只配置string类型；多页面则配置成Object，每个key则可以在HtmlWebpackPlugin 里的chunks和excludeChunks使用。
  下面代码中，已注释的，表示可以不配置，会有默认值。

const path = require("path"); // 导入nodejs平台的path库
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 用于生成html
const TerserPlugin = require("terser-webpack-plugin"); // 用于压缩打包后的代码
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; // 打包分析器
const CopyWebpackPlugin = require("copy-webpack-plugin"); // 复制文件到dist

module.exports = {

  mode: "development",  // production生产环境，development开发环境
  entry: "./src/index.js", // 入口文件路径，即js import的开始路径文件
  /*
  	// 可以在entry里设置chunks，在HtmlWebpackPlugin的chunks里使用，一般用于多页面
	entry: {
		main: './src/index.js',
		common: './src/common.js',
		list: './src/list.js',
		detail: './src/detail.js'
	},
*/
  output: {		// 打包后的，出口信息		
    // 出口文件名,[name]默认名，[contenthash]哈希值，防止浏览器缓存文件
    filename: "[name].[contenthash].js",
    path: path.resolve(__dirname, "dist"), // 存放目录, resolve()可拼接目录
  },
  resolve: {
    alias: {  // 设置路径别名， import的时候所有位置都直接 'utiles/date.js'
      utils: path.resolve(__dirname, "src/utils"),
      css: path.resolve(__dirname, "src/css"),
      img: path.resolve(__dirname, "src/img"),
    }
  },
  devtool: "inline-source-map", // 开发模式下方便查看打包后的js源代码
  devServer:{  // webpack-dev-server, 开发模式的运行时服务器设置
  	// contentBase: resolve('./dist'), // 对外提供的访问内容的路径
  	// host: '127.0.0.1', 
  	port: 8080, 
  	headers: { // 向所有的请求添加headers
  	},
  	https: true, // 默认情况下dev-server使用http协议，通过配置可以支持https
    /*https: {
       key: fs.readFileSync("/path/to/server.key"),
       cert: fs.readFileSync("/path/to/server.crt"),
       ca: fs.readFileSync("/path/to/ca.pem"),
    },*/
    /*proxy: {  // 设置代理主机地址，即本地地址会转到代理地址.
     '/api': {
         target: 'https://xxx.com/api', // 代理地址
         pathRewrite: {
           '^/api': ''
         },
         changeOrigin: true
      }
    }*/
  },
  optimization: {
    minimize: true,  // 是否压缩打包后的文件
    minimizer: [new TerserPlugin()], // 使用的压缩器
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "首页",  // 页面的标题
      template: path.resolve(__dirname, `src/index.html`), // 本地模板文件的位置
	  favicon: path.resolve(__dirname, `src/favicon.ico`), //配置网站图标
      inject: true, // true或body：js插入到body元素的底部, head：插入head, false: 不注入, 默认head
      chunks:['common','main'], // 不配置，默认会将entry中所有的thunk注入到模板中,多页面时区分使用js
      excludeChunks: ['list', 'detail'], // 与chunks相反，设置不注入的chunks
    }),  // 使用html插件
    new BundleAnalyzerPlugin(), // 打包分析器
    new CopyWebpackPlugin({
      // 需拷贝的配置项
      patterns: [{
          from: "public", // 从哪里 copy
          // to: '', 这里可以省略 to，自动从 output 的 path 去找
          globOptions: {
            ignore: ['**/index.html'] 
              // 这里必须在前面加 **/ 表示从当前路径下忽略
              // 且忽略目录中文件后不能为空
          }
        }],
    }),
  ],
  module: {
    rules: [  // 里面的每一项就是一种文件loader
      {
        test: /\.css$/i, // 用于匹配文件，用正则表达式
        use: ["style-loader", "css-loader"] // 使用哪些loader
      }, {
        test: /\.(png|jpg|jpeg|svg|gif)$/i, // 匹配图片
        type: "asset/resource" // 因图片使用内置的loader，使用type属性
      }, {
        // 使用babel打包，可以在低版本浏览器运行
        test: /\.js$/,
        use: {   // use 使用对象，可以对loader进行设置 
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"]  // 
          },
        }
      }
    ],
  },
}

修改package.json

添加scripts代码

  "scripts": {
    "test": "jest --coverage",
    "start": "webpack serve --open",
    "build": "webpack"
  },

运行

npm run start # 运行项目
npm run test  # 运行单元测试
npm run build # 打包