webpack基本使用

webpack

Webpack = Web Package
webpack 是⼀个模块打包器（Module bundler）。它的主要⽬标是将 JS ⽂件打包在⼀起，
打包后的⽂件⽤于在浏览器中使⽤。同时，它也能够转换 (transform)、打包(bundle) 或包
裹 (package) 任何资源。

功能：

• 将多个⽂件合并（打包），减少 HTTP 请求次数，从⽽提⾼效率
• 对代码进⾏编译，确保浏览器兼容性
• 对代码进⾏压缩，减⼩⽂件体积，提⾼加载速度
• 检测代码格式，确保代码质量
• 提供热更新服务，提⾼开发效率
• 针对不同环境，提供不同的打包策略

配置文件

默认的配置⽂件名称是 webpack.config.js

webpack.config.js 是以 CommonJS规范进⾏组织的

常用基本配置：

/**
*webpack配置
**/
const { resolve } = require('path')

module.exports = {
    //打包模式
    mode:'development',

    //入口文件
    entry:'./src/index.js',

    //出口配置
    output:{
        //输出目录
        path:resolve(__dirname,'output'),
        //输出文件名
        filename:'main.js'
    },
    module:{
        rules:[
            //指定多个配置规则
        ]
    },

    //开发服务器
    devServer:{

    },

    //插件配置
    plugins:[
    
    ]

}

打包css

• css-loader 负责遍历 CSS ⽂件，将 CSS 转化为 CommonJS（将 CSS 输出到打包后的JS ⽂件中）
• style-loader 负责把包含 CSS 内容的 JS 代码，挂载到⻚⾯的 style 标签当中。
• less-loader 负责将less文件编译称为 CSS 文件。
• mini-css-extract-plugin 负责将CSS提取到单独的文件中。它为每个包含CSS的JS文件创建一个CSS文件。
• postcss-loader autoprefixer 负责解决浏览器兼容问题添加前缀。（PostCSS 需要⼀个配置，⽤来设置autoprefixer 的设置标准（即需要指定兼容哪些浏览器））
• stylelint stylelint-config-standard stylelint-webpack-plugin 负责 CSS 格式的校验

webpack.config.js:

const { resolve } = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const StyleLintPlugin = require('stylelint-webpack-plugin')
const CssMiniMizer = require('css-minimizer-webpack-plugin')

module.exports = {
    //打包模式
    mode:'development',

    //入口文件
    entry:'./src/index.js',

    //出口配置
    output:{
        //输出目录
        path:resolve(__dirname,'output'),
        //输出文件名
        filename:'main.js'
    },
    module:{
        rules:[
            //指定多个配置规则
            {
                test:/\.css$/i,
                //use中loader的加载顺序从右到左，先下后上
                use:[
                    //#3.将js中的样式挂载到<style>标签中
                    // 'style-loader',

                    //3.将css打包到独立的文件中
                    MiniCssExtractPlugin.loader,

                    //2.css-loader按commonjs规范将样式文件输出到js中
                    'css-loader',

                    //1通过postcss-loader给样式属性添加浏览器前缀
                    'postcss-loader'
                ]
            },
            {
                test:/\.less$/i,
                //use中loader的加载顺序从右到左，先下后上
                use:[
                    //#4.将js中的样式挂载到<style>标签中
                    // 'style-loader',

                    //4.将css打包到独立的文件中
                    MiniCssExtractPlugin.loader,

                    //3.css-loader按commonjs规范将样式文件输出到js中
                    'css-loader',

                    //2通过postcss-loader给样式属性添加浏览器前缀
                    'postcss-loader',

                    //1.将less转成普通css
                    'less-loader'
                ]
            }
        ]
    },

    //开发服务器
    devServer:{

    },

    //插件配置
    plugins:[
        new MiniCssExtractPlugin({
            filename:'css/[name].css'//[name].css保留原有名字
        }),
        new StyleLintPlugin({
            //制定需要格式校验的文件
            files:['src/css/*.{css,less,sass,scss}']
        }),
        new CssMiniMizer({
            //压缩css
        })
    ]

}

postcss.config.js:

module.exports = {
    'plugins':[
        require('autoprefixer')
    ]
}

package.json（插件所需配置部分）:

"browserslist": [
    "last 1 version",
    "> 1%"
  ],
  "stylelint": {
    "extends": "stylelint-config-standard",
    "rules": {}
  }

打包HTML

html-webpack-plugin 该插件⽤来创建 HTML ⽂件，创建的 HTML ⽂件默认引⼊打包后的所有资源⽂件

引入

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

配置

plugins: [
 	new HtmlWebpackPlugin({
		template: './src/index.html', // 指定 HTML 的模板
		title:'abbbout',//指定HTML title为一个变量
            minify:{
                collapseWhitespace:true,
                keepClosingSlash:true,
                removeComments:true,
                removeRedundantAttributes:true,
                removeScriptTypeAttributes:true,
                removeStyleLinkTypeAttributes:true,
                useShortDoctype:true
            }//压缩HTML代码
	}) 
 ]

打包JS

babel-loader
@babel/core 包含 Babel 转换的核⼼ API
@babel/preset-env 包含最新 JS 语法的转换规则
babel-loader Webpack 中，转换 JS 的加载器

配置：

const path = require('path')

 module.exports = {
	 mode: 'none',
	 entry: './src/main.js',
	 output: {
		 filename: 'bundle.js',
		 path: path.join(__dirname, 'dist'),
		 publicPath: 'dist/'
	 },
	 module: {
		 rules: [
			 {
				 test: /\.m?js$/i,
				 exclude: /node_modules/, // 排除不需要打包的⽬录
				 use: {
					 loader: 'babel-loader',
					 options: {
					 presets: ['@babel/preset-env']
				 	}
				 }
			 }
		 ]
	 }
 }

启⽤ babel-loader 后 ES6+ 的语法会转成 ES5。但是 babel 只会对基本语法进⾏转移。像 promise
这样的⾼级语法，Babel 就不能转换。

转化高级语法可以使用polyfill

在入口文件引入 import '@babel/polyfill'

@babel/polyfill 会对所有的 JS 新语法进⾏转译（没⽤到的新语法也会被转译），因此打包后的 JS 会
⾮常⼤

使用core-js 可以进行按需转译

配置：

{
    test: /\.m?js$/i,
    exclude: /node_modules/, // 排除不需要打包的⽬录
    use: {
        loader: 'babel-loader',
        options: {
            presets: [
                [
                    '@babel/preset-env',
                    {
                        //按需加载
                        useBuiltIns:'usage',
                        corejs:3,
                        //指定兼容浏览器版本
                        targets:{
                            chrome:'58',
                            ie:'9',
                            firefox:'60',
                            edge:'17'
                        }
                    }
                ]
            ]
        }
    }
}

格式校验：
使⽤ eslint-webpack-plugin 来进⾏ JS 的格式校验

eslint（⽤来对 JS 进⾏格式校验的⼯具）
eslint-config-airbnb-base（格式校验规则)
eslint-webpack-plugin（Webpack 的 eslint 插件）
eslint-plugin-import（ ⽤于在 package.json 中读取 eslintConfig 配置项 ）

使用：

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
	 plugins: [new ESLintPlugin(options)],
};

配置：

const ESLintPlugin = require('eslint-webpack-plugin');

	module.exports = {
		plugins: [
			new ESLintPlugin({
				fix: true,
				extensions: ['js', 'json', 'coffee'],
				exclude: '/node_modules/'
			}),
	]
}

在 package.json 中，通过 eslintConfig 指定eslint配置

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

webpack打包基础的demo：https://github.com/Aucanon/learn/tree/main/Part3/M2/test/basic