前端-webpack生产环境基本配置

# 提取 css 成单独文件

1. 下载 plugin

   npm i mini-css-extract-plugin -D

2. 修改配置文件

   	const { resolve } = require('path');
   	const HtmlWebpackPlugin = require('html-webpack-plugin');
   	const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   	module.exports = {
   	entry: './src/js/index.js',
   	output: {
   	filename: 'js/built.js',
   	path: resolve(__dirname, 'build')
   	},
   	module: {
   	rules: [
   	{
   	test: /\.css$/,
   	use: [
   	// 这个 loader 取代 style-loader。作用：提取 js 中的 css 成单独文件
   	MiniCssExtractPlugin.loader,
   	// 将 css 文件整合到 js 文件中
   	'css-loader'
   	]
   	}
   	]
   	},
   	plugins: [
   	new HtmlWebpackPlugin({
   	template: './src/index.html'
   	}),
   	new MiniCssExtractPlugin({
   	// 对输出的 css 文件进行重命名
   	filename: 'css/built.css'
   	})
   	],
   	mode: 'development'
   	};

3. 运行指令：webpack

# css 兼容性处理

1. 下载 loader

   npm i postcss-loader postcss-preset-env -D

2. 修改配置文件

   	const { resolve } = require('path');
   	const HtmlWebpackPlugin = require('html-webpack-plugin');
   	const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   	// 设置 nodejs 环境变量
   	// process.env.NODE_ENV = 'development';
   	module.exports = {
   	entry: './src/js/index.js',
   	output: {
   	filename: 'js/built.js',
   	path: resolve(__dirname, 'build')
   	},
   	module: {
   	rules: [
   	{
   	test: /\.css$/,
   	use: [
   	MiniCssExtractPlugin.loader,
   	'css-loader',
   	// 修改 loader 的配置
   	{
   	loader: 'postcss-loader',
   	options: {
   	ident: 'postcss',
   	plugins: () => [
   	//postcss 的插件
   	require('postcss-preset-env')()
   	]
   	}
   	}
   	]
   	}
   	]
   	},
   	plugins: [
   	new HtmlWebpackPlugin({
   	template: './src/index.html'
   	}),
   	new MiniCssExtractPlugin({
   	filename: 'css/built.css'
   	})
   	],
   	mode: 'development'
   	};

3. 修改 package.json，添加如下配置

   	"browserslist": {
   	"development": [
   	"last 1 chrome version",
   	"last 1 firefox version",
   	"last 1 safari version"
   	],
   	"production": [
   	">0.2%",
   	"not dead",
   	"not op_mini all"
   	]
   	}

4. 运行指令：webpack

# 压缩 css

1. 下载 plugin

   npm i optimize-css-assets-webpack-plugin -D

2. 修改配置文件

   	const { resolve } = require('path');
   	const HtmlWebpackPlugin = require('html-webpack-plugin');
   	const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   	const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
   	// 设置 nodejs 环境变量
   	// process.env.NODE_ENV = 'development';
   	module.exports = {
   	entry: './src/js/index.js',
   	output: {
   	filename: 'js/built.js',
   	path: resolve(__dirname, 'build')
   	},
   	module: {
   	rules: [
   	{
   	test: /\.css$/,
   	use: [
   	MiniCssExtractPlugin.loader,
   	'css-loader',
   	{
   	loader: 'postcss-loader',
   	options: {
   	ident: 'postcss',
   	plugins: () => [
   	//postcss 的插件
   	require('postcss-preset-env')()
   	]
   	}
   	}
   	]
   	}
   	]
   	},
   	plugins: [
   	new HtmlWebpackPlugin({
   	template: './src/index.html'
   	}),
   	new MiniCssExtractPlugin({
   	filename: 'css/built.css'
   	}),
   	// 压缩 css
   	new OptimizeCssAssetsWebpackPlugin()
   	],
   	mode: 'development'
   	};

3. 运行指令：webpack

# js 语法检查

1. 下载安装包

   npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D

2. 修改配置文件

   	const { resolve } = require('path');
   	const HtmlWebpackPlugin = require('html-webpack-plugin');
   	module.exports = {
   	entry: './src/js/index.js',
   	output: {
   	filename: 'js/built.js',
   	path: resolve(__dirname, 'build')
   	},
   	module: {
   	rules: [
   	{
   	test: /\.js$/,
   	// 注意：只检查自己写的源代码，第三方的库是不用检查的
   	exclude: /node_modules/,
   	loader: 'eslint-loader',
   	options: {
   	// 自动修复 eslint 的错误
   	fix: true
   	}
   	}
   	]
   	},
   	plugins: [
   	new HtmlWebpackPlugin({
   	template: './src/index.html'
   	})
   	],
   	mode: 'development'
   	};

3. 配置 package.json

   	"eslintConfig": {
   	"extends": "airbnb-base"
   	}

4. 运行指令：webpack

# js 兼容性处理

1. 下载安装包

   npm i babel-loader @babel/core @babel/preset-env @babel/polyfill core-js -D

2. 修改配置文件

   	const { resolve } = require('path');
   	const HtmlWebpackPlugin = require('html-webpack-plugin');
   	module.exports = {
   	entry: './src/js/index.js',
   	output: {
   	filename: 'js/built.js',
   	path: resolve(__dirname, 'build')
   	},
   	module: {
   	rules: [
   	/*
   	js 兼容性处理：babel-loader @babel/core
   	1. 基本 js 兼容性处理 --> @babel/preset-env
   	问题：只能转换基本语法，如 promise 高级语法不能转换
   	2. 全部 js 兼容性处理 --> @babel/polyfill
   	问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了～
   	3. 需要做兼容性处理的就做：按需加载 --> core-js
   	*/
   	{
   	test: /\.js$/,
   	exclude: /node_modules/,
   	loader: 'babel-loader',
   	options: {
   	// 预设：指示 babel 做怎么样的兼容性处理
   	presets: [
   	[
   	'@babel/preset-env',
   	{
   	// 按需加载
   	useBuiltIns: 'usage',
   	// 指定 core-js 版本
   	corejs: {
   	version: 3
   	},
   	// 指定兼容性做到哪个版本浏览器
   	targets: {
   	chrome: '60',
   	firefox: '60',
   	ie: '9',
   	safari: '10',
   	edge: '17'
   	}
   	}
   	]
   	]
   	}
   	}
   	]
   	},
   	plugins: [
   	new HtmlWebpackPlugin({
   	template: './src/index.html'
   	})
   	],
   	mode: 'development'
   	};

3. 运行指令：webpack

# js 压缩

生产环境会自动压缩 js 代码。所以只需更改 mode 为 production 即可。如下

const { resolve } = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

  entry: './src/js/index.js',

  output: {

    filename: 'js/built.js',

    path: resolve(__dirname, 'build')

  },

  plugins: [

    new HtmlWebpackPlugin({

      template: './src/index.html'

    })

  ],

  // 生产环境下会自动压缩 js 代码

  mode: 'production'

};

运行指令：webpack

# HTML 压缩

1. 修改配置文件

   	const { resolve } = require('path');
   	const HtmlWebpackPlugin = require('html-webpack-plugin');
   	module.exports = {
   	entry: './src/js/index.js',
   	output: {
   	filename: 'js/built.js',
   	path: resolve(__dirname, 'build')
   	},
   	plugins: [
   	new HtmlWebpackPlugin({
   	template: './src/index.html',
   	// 压缩 html 代码
   	minify: {
   	// 移除空格
   	collapseWhitespace: true,
   	// 移除注释
   	removeComments: true
   	}
   	})
   	],
   	mode: 'production'
   	};

2. 运行指令：webpack

# 生产环境配置汇总

const { resolve } = require('path');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

const HtmlWebpackPlugin = require('html-webpack-plugin');

// 定义 nodejs 环境变量：决定使用 browserslist 的哪个环境

process.env.NODE_ENV = 'production';

// 复用 loader

const commonCssLoader = [

  MiniCssExtractPlugin.loader,

  'css-loader',

  {

    // 还需要在 package.json 中定义 browserslist

    loader: 'postcss-loader',

    options: {

      ident: 'postcss',

      plugins: () => [require('postcss-preset-env')()]

    }

  }

];

module.exports = {

  entry: './src/js/index.js',

  output: {

    filename: 'js/built.js',

    path: resolve(__dirname, 'build')

  },

  module: {

    rules: [

      {

        test: /\.css$/,

        use: [...commonCssLoader]

      },

      {

        test: /\.less$/,

        use: [...commonCssLoader, 'less-loader']

      },

      /*

        正常来讲，一个文件只能被一个 loader 处理。

        当一个文件要被多个 loader 处理，那么一定要指定 loader 执行的先后顺序：

          先执行 eslint 在执行 babel

      */

      {

        // 在 package.json 中 eslintConfig --> airbnb

        test: /\.js$/,

        exclude: /node_modules/,

        // 优先执行

        enforce: 'pre',

        loader: 'eslint-loader',

        options: {

          fix: true

        }

      },

      {

        test: /\.js$/,

        exclude: /node_modules/,

        loader: 'babel-loader',

        options: {

          presets: [

            [

              '@babel/preset-env',

              {

                useBuiltIns: 'usage',

                corejs: {version: 3},

                targets: {

                  chrome: '60',

                  firefox: '50'

                }

              }

            ]

          ]

        }

      },

      {

        test: /\.(jpg|png|gif)/,

        loader: 'url-loader',

        options: {

          limit: 8 * 1024,

          name: '[hash:10].[ext]',

          outputPath: 'imgs',

          esModule: false

        }

      },

      {

        test: /\.html$/,

        loader: 'html-loader'

      },

      {

        exclude: /\.(js|css|less|html|jpg|png|gif)/,

        loader: 'file-loader',

        options: {

          outputPath: 'media'

        }

      }

    ]

  },

  plugins: [

    new MiniCssExtractPlugin({

      filename: 'css/built.css'

    }),

    new OptimizeCssAssetsWebpackPlugin(),

    new HtmlWebpackPlugin({

      template: './src/index.html',

      minify: {

        collapseWhitespace: true,

        removeComments: true

      }

    })

  ],

  mode: 'production'

};