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