基于webpack进行打包构建

基于webpack 进行打包

npm init -y   —————— 初始化项目
npm install --save-dev webpack webpack-cli  ---- 安装webpack 和webpack-cli 
在项目根目录下创建webpack.config.js 文件进行项目入口等的相关配置
eg:
const path = require('path');

module.exports = {
  entry: './demo/index.html', // 指定入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出目录
    filename: 'bundle.js', // 输出的文件名
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              minimize: true, // 是否压缩 HTML
            },
          },
        ],
      },
      {
        test: /\.json$/,
        type: 'json',
      },
    ],
  },
  plugins: [
    new (require('webpack').DefinePlugin)({
      'process.env.NODE_ENV': JSON.stringify('production'), // 定义环境变量
    }),
  ],
  mode: 'production', // 模式为生产模式
};
// 在webpack.config.js文件中根据plugin loader 的配置安装相关的插件
// eg ：npm install --save-dev html-loader
npx webpack --config webpack.config.js  执行构建