webpack打包 --- 打包工具

在node.js中安装全局webpack

cmd中运行 npm install webpack webpack-cli –g

在需要打包的文件中cmd

npm install webpack webpack-cli --save-dev
查看是否安装成功

webpack -v
初始化环境

npm init -y
项目文件配置
在项目目录下，新建config文件夹，用于存放配置文件;out文件夹，用于存放打包生成文件.
配置webpack.config.js文件


基础配置

// webpack.base.js用于通用的 webpack 配置

// 自动适配浏览器前缀
const autoprefixer = require(‘autoprefixer‘);
// 用于多页面入口打包，
const glob = require(‘glob‘);
// 获取路径
const path = require(‘path‘);
// 自动清除输出目录插件
const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);
// webpack 打包出错 terminal log 插件
const FriendlyErrorsWebpackPlugin = require(‘friendly-errors-webpack-plugin‘);
// 引入外部资源，申生成入口插件
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
// 将 CSS 提取为独立的文件的插件
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘);
// 获取项目根目录
const projectRoot = process.cwd();

// 多页面应用入口程序，通过匹配获取对应页面入口，单页面可以直接定义 entry 就行
const setMPA = () => {
  const entry = {};
  const htmlWebpackPlugins = [];
  const entryFiles = glob.sync(path.join(projectRoot, ‘./src/*/index.js‘));

  Object.keys(entryFiles)
    .map((index) => {
      const entryFile = entryFiles[index];
      // ‘/Users/buzhuo/my-project/src/index/index.js‘
      const match = entryFile.match(/src\/(.*)\/index\.js/);
      const pageName = match && match[1];
      entry[pageName] = entryFile;
      return htmlWebpackPlugins.push(
        new HtmlWebpackPlugin({
          inlineSource: ‘.css$‘,
          template: path.join(projectRoot, `./src/${pageName}/index.html`),
          filename: `${pageName}.html`,
          chunks: [‘vendors‘, pageName],
          inject: true,
          minify: {
            html5: true,
            collapseWhitespace: true,
            preserveLineBreaks: false,
            minifyCSS: true,
            minifyJS: true,
            removeComments: false,
          },
        })
      );
    });
// 返回入口以及入口对应的 htmlWebpackPlugins
  return {
    entry,
    htmlWebpackPlugins,
  };
};

const { entry, htmlWebpackPlugins } = setMPA();

module.exports = {
  entry: entry,
  output: {
    path: path.join(projectRoot, ‘dist‘),
    filename: ‘[name]_[chunkhash:8].js‘
  },
  module: {
    rules: [
      {
        test: /.js$/,
        use: [
          {
            loader: ‘babel-loader‘
          }
        ],
      },
      {
        test: /.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          ‘css-loader‘,
        ],
      },
      {
        test: /.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          ‘css-loader‘,
          ‘less-loader‘,
          {
            // CSS预处理
            loader: ‘postcss-loader‘,
            options: {
              plugins: () => [
                autoprefixer({
                  browsers: [‘last 2 version‘, ‘>1%‘, ‘ios 7‘],
                }),
              ],
            },
          },
          {
            // px 自动转换为 rem 移动端，若无移动端需求该 loader 可删去
            loader: ‘px2rem-loader‘,
            options: {
              remUnit: 75,
              remPrecision: 8,
            },
          },
        ],
      },
      {
        test: /.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: ‘file-loader‘,
            options: {
              name: ‘[name]_[hash:8].[ext]‘,
            },
          },
        ],
      },
      {
        test: /.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: ‘file-loader‘,
            options: {
              name: ‘[name]_[hash:8][ext]‘,
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: ‘[name]_[contenthash:8].css‘,
    }),
    new CleanWebpackPlugin(),
    new FriendlyErrorsWebpackPlugin(),
    function errorPlugin() {
      this.hooks.done.tap(‘done‘, (stats) => {
      if (stats.compilation.errors && stats.compilation.errors.length && process.argv.indexOf(‘--watch‘) === -1) {
          process.exit(1);
      }
      });
    },
  ].concat(htmlWebpackPlugins),
  // webpack 在打包时仅出错才会输出到 terminal，具体参数可到https://webpack.js.org/查看
  stats: ‘errors-only‘,
};



开发环境配置

// merge 用来合并 webpack.base.js 与 webpack.dev.js
const merge = require(‘webpack-merge‘);
const webpack = require(‘webpack‘);
const baseConfig = require(‘./webpack.base‘);

const devConfig = {
  mode: ‘production‘,
  plugins: [
    // 生产环境下开启热加载插件
    new webpack.HotModuleReplacementPlugin(),
  ],
devServer: {
    // 指定 devServer 相关，在此可以指定 port 等配置
  contentBase: ‘./dist‘,
    hot: true,
    stats: ‘errors-only‘,
  },
  // 该参数见下图
  devtool: ‘cheap-source-map‘,
};

module.exports = merge(baseConfig, devConfig);


生产环境配置

// css 压缩插件
const cssnano = require(‘cssnano‘);
  // merge webpack.dev.js 与 webpack.prod.js
const merge = require(‘webpack-merge‘);
  // 用于 cdn 加速 react，引用外部资源
const HtmlWebpackExternalsPlugin = require(‘html-webpack-externals-plugin‘);
  // 提取 css 到单独文件并且压缩 css
const OptimizeCSSAssetsPlugin = require(‘optimize-css-assets-webpack-plugin‘);
  // 前面提到的基本配置
const baseConfig = require(‘./webpack.base‘);

const prodConfig = {
  mode: ‘production‘,
  plugins: [
    new OptimizeCSSAssetsPlugin({
      assetNameRegExp: /\.css$/g,
      cssProcessor: cssnano,
    }),
    new HtmlWebpackExternalsPlugin({
      externals: [
        {
          module: ‘react‘,
          entry: ‘https://11.url.cn/now/lib/16.2.0/react.min.js‘,
          global: ‘React‘,
        },
        {
          module: ‘react-dom‘,
          entry: ‘https://11.url.cn/now/lib/16.2.0/react-dom.min.js‘,
          global: ‘ReactDOM‘,
        },
      ],
    }),
  ],
  // code split
  optimization: {
    splitChunks: {
    minSize: 0,
      cacheGroups: {
        commons: {
          name: ‘vendors‘,
          chunks: ‘all‘,
          minChunks: 2,
        },
      },
    },
  },
};

module.exports = merge(baseConfig, prodConfig);



所需依赖包汇总
autoprefixer

babel-loader clean-webpack-plugin css-loader cssnano eslint-loader file-loader friendly-errors-webpack-plugin glob html-inline-css-webpack-plugin html-loader html-webpack-externals-plugin html-webpack-inline-source-plugin html-webpack-plugin less less-loader mini-css-extract-plugin node-notifier optimize-css-assets-webpack-plugin postcss-loader postcss-preset-env px2rem-loader raw-loader react react-dom style-loader uglifyjs-webpack-plugin url-loader webpack webpack-cli webpack-merge


仅供自身参考学习

 全局安装webpack

原文：https://www.cnblogs.com/cjwblogs/p/15266061.html