Webpack的基本使用

Webpack进阶

Webpack基础

webpack的五个核心概念

  • Entry
  • Output
  • Loader
  • Plugins
  • Mode

安装webpack cli

npm i webpack webpack-cli -D

​ -D是–save -dev的缩写

运行指令

  • 开发环境

    //webpack会以./src/index.js为入口文件开始打包,打包后输出到./build/bulit.js,整体打包环境是开发环境
    webpack ./src/index.js -o ./build/built.js --mode=development
    
  • 生产环境

    //webpack会以./src/index.js为入口文件开始打包,打包后输出到./build/bulit.js,整体打包环境是开发环境
    webpack ./src/index.js -o ./build/built.js --mode=development
    
选项描述特点
development会将process.env.NODE_ENV 的值设为development。
启用NamedChunksPlugin 和NamedModulesPlugin。
能让代码本地调试运行的环境
production会将process.env.NODE_ _ENV 的值设为production。
启用FlagDependencyUsagePlugin,
FlagIncludedChunksPlugin,
ModuleConcatenationPlugin, NoEmitOnErrorsPlugin,OccurrenceOrderPlugin, SideEffectsFlagPlugin和
UglifyJsPlugin.
能让代码优化上线运行的环境

webpack的作用

  • webpack能处理js/json资源,不能直接处理css/img等其他资源
  • 生产环境与开发环境将ES6模块化编译成浏览器能识别等模块化
  • 生产环境比开发环境多一个压缩js代码

处理不能直接打包的资源

想要处理不能直接打包的资源 需要在webpack.config.js中配置对应的loader对资源进行处理

Webpack.config.js

/*
 作用:指示 webpack干哪些活(当你运行 webpack指令时,会加载里面的配置)
 所有构建工具都是基于nodejs平台运行的
 模块化默认采用CommonJs
 注意:这里是配置文件 所以使用CommonJs src中使用的则是ES Modules
 配置文件和src一定要区分开来
 这里可以类比一下vue项目中的vue.config.js
*/

module.exports = {
  //webpack配置
  //入口起点
  entry: './src/index. js',
	//输出
	output: {
  	//输出文件名
		filename: 'built. js',
		//输出路径
		//__dirname nodes的变量,代表当前文件的目录绝对路径
		path: resolve(__dirname, 'build')
	},
	module: {
    rules: [
  		//详细loader配置
      {
        ...
      }
    ]
  },
  // plugins的配置
  plugins: [
    //详细 plugins的配置
  ],
  //模式
  mode: 'development' //开发模式
  //mode: production
}
  1. 打包样式资源

    // resolve用来拼接绝对路径的方法
    const resolve= require('path');
    
    module.exports = {
      //webpack配置
      //入口起点
      entry: './src/index. js',
    	//输出
    	output: {
      	//输出文件名
    		filename: 'built. js',
    		//输出路径
    		//__dirname nodes的变量,代表当前文件的目录绝对路径
    		path: resolve(__dirname, 'build')
    	},
    	module: {
        rules: [
      		//详细loader配置
          //不同文件必须配置不同loader处理
          /*
           处理css资源
          */
          {
            test: /\.css$/,
            //使用哪些loader进行处理
            use: [
              // use数组中loader执行顺序:从右到左,从下到上依次执行
              // 创建style标签,将js中的样式资源插入进去,添加到head中生效
              'style-loader',
              // 将css文件变成commonJs模块加载js中,里面内容是样式字符串
              'css-loader'
            ]//npm i css-loader style-loader -D
          },
          /*
           处理less资源
          */
          {
            test: /\.less$/,
            use: [
              'style-loader',
              'css-loader',
              // 将less文件编译成css文件
              'less-loader'
            ]
          }
        ]
      },
      // plugins的配置
      plugins: [
        //详细 plugins的配置
      ],
      //模式
      mode: 'development' //开发模式
      //mode: production
    }
    
  2. 打包html资源

    /*
    	loader: 1.下载 2.使用(配置loader)
    	plugins: 1.下载 2.引入 3.使用
    */
    const resolve= require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
      entry: './src/index. js',
    	output: {
    		filename: 'built. js',
    		path: resolve(__dirname, 'build')
    	},
      module: {
        //loader配置
      },
      plugins: [
        //plugins的配置
        //html-webpack-plugin
        //功能:默认会创建一个空的HTML,自动引入打包输出的所有资源(js/css)
    		//需求:需要有结构的HTML文件 
        new HtmlWebpackPlugin({
          // 复制',/src/ index.htm1’文件,并自动引入打包输出的所有资源(js/css)
          template: './src/index.html'
        });
      ],
      //模式
      mode: 'development'
    }
      
    
  3. 打包图片资源

    module.exports = {
      ...
      module: {
        rules: [
          {
            test: /\.less$/,
            use: ['style-loader', 'css-loader','less-loader']
          },
          {
            //处理图片资源
            //问题: 默认处理不了html中的图片
            test: /\.(jpg|png|gif)$/,
            // 使用一个loader
            // 下载 url-loader file-loader
            loader: 'url-loader',
            options: [
              //图片大小小于8kb,就会被base64处理
              //优点: 减少请求数量(减轻服务器压力)
              //缺点:图片体积增大(文件请求速度更慢)因为这里小于8kb,所以及时体积增大,也不会太明显
              //base64在客户端本地解码所以会减少服务器压力,如果图片过大还继续采用base64编码会导致cpu调用率上升网页加载时变卡
              limit: 8*1024
              //问题:因为url-loader默认 使用es6模块化解析,而html-loader引入图片是commonjs
              //解析时会出问题: [object Module]
    					//解决:关闭url-loader的es6模块化,使用commonjs解析
    					esModule: false,
              //给图片进行重命名
    					// [hash: 10]取图片的hash的前10位
              // [ext]取文件原来扩展名
    					name: '[hash:10].[ext]'
            ]
          },
          {
            test: /\.html$/,
            //处理html中的img图片(负责引入img,从而能被url-loader进行处理)
            loader: 'html-loader'
          }
        ]
      }
      ...
    }
    
  4. 打包其他资源

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

module.exports = {
  entry: './src/index. js',
	output: {
		filename: 'built. js',
		path: resolve(__dirname, 'build')
	},
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      //打包其他资源(除了html/js/css资源以外的资源)
      {
        exclude: /\.(css|js|html|less)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    });
  ],
  //模式
  mode: 'development'
}
  

开发服务器 devServer

每次编写完代码需要重复打包,过程过于繁琐,

所以有了devServer,用于自动化,帮助我们自动编译,自动打开浏览器,自动刷新浏览器

特点:只会在内存中编译打包,不会有任何输出(不会生成一个打包后的文件夹,编译打包在内存中进行,类比vue脚手架中保存文件和打包项目的区别)

启动devServer指令为: npx webpack-dev-server(启动前需要使用npm安装webpack-dev-server)

module.exports = {
  ...
  devServer: {
    //构建后的路径
    contentBase: resolve(__dirname, 'bulid'),
    //启动gzip压缩
    compress: true,
    //启动服务器端口号
    port: 3000,
    //自动打开浏览器
    open: true
  }
  ...
}

开发环境配置

基本配置

运行项目指令:

  • webpack 会将打包结果输出出去

  • npx webpack- dev-server只会在内存中编译打包,没有输出

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bulit.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        user: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.css$/,
        user: ['style-loader', 'css-loader']
      },
      {
        //处理图片资源
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8*1024,
          name: '[hash:10].[ext]',
          esModule: false
        }
        //在build文件夹中分类,图片资源统一放在build/imgs的文件夹中
        outputPath: 'imgs'
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
      {
        //处理其他资源
        exclude: /\.(html|css|js|less|jpg|png|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        },
        //在build文件夹中分类,其他资源统一放在build/media的文件夹中
        outputPath: 'media'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    });
  ],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'bulid'),
    compress: true,
    port: 3000,
    open: true
  }
}

提取css成单独文件

使用mini-css-extract-plugin将css提取为单独文件

安装mini-css-extract-plugin

npm i mini-css-extract-plugin -D

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

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          //取代style-loader
          //作用:提取js中的css成单独文件
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      //对输出的css重命名
      filename: 'css/built.css'
    });
  ]
  ...
}

css兼容性处理

postcss

  • postcss- loader
  • postcss-preset-env

安装

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

使用

帮postcss找到package . json中browserslist里面的配置,通过配置加载指定的css兼容性样式

在package.json中进行配置

"browserslist": {
  //开发环境-->设置node环境变量: process.env.NODE_ENV = developement
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ],
  //生产环境:默认是看生产环境
  "production": [
    ">0.2%",
    "not dead" ,
    "not op_ mini all"
  ]
}

webpack.config.js

//设置nodejs环境变量
process.env.NODE_ENV = 'development';

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.css$/,
        user: [
          //取代style-loader
          //作用:提取js中的css成单独文件
          MiniCssExtractPlugin.loader,
          'css-loader',
          //使用loader的默认配置
          //'postcss-loader'
          //修改loader的配置
          {
            loader: 'postcss-loader',//如果只写这句话相当于使用的默认配置,和上面直接写'postcss-loader的结果是一致的
            options: {
              ident: 'postcss',
              plugins: () => [
            		// postcss的插件
								require ('postcss-preset-env')()
          		]
            }
          }
        ]
      },
    ]
  }
  ...
}

压缩css

安装

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

使用

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

module.exports = {
  ...
  plugins: [
    //压缩css
    new OptimizeCssAssetsWebpackPlugin();
  ]
  ...
}

js语法检查

1.语法检查: eslint- loader eslint
注意:只检查自己写的源代码,第三方的库是不用检查的
2.设置检查规则:
package . json中eslintConfig中设置
airbnb

  • eslint-config-airbnb-base
  • eslint-plugin-import
  • eslint

安装

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

package.json (也可以选择新建一个.eslintrc,在里面进行配置)

"eslintConfig": {
  //设置检查规则,继承于airbnb
	"extends": "airbnb-base"
}

webpack.config.js

module.exports = {
  ...
	module: {
		rules: [
      {
        test:/\.js$/,
        exclude: /node_ modules/ ,
        loader: ' eslint-loader',
        options: {
          //自动修复eslint的错误
          fix: true
        }
      }
    ]
	}
  ...
}

js兼容性处理

1.基本js兼容性处理–> @babel/ preset-env

将部分es6语法转化为es5的语法

  • babel- loader
  • @babel/ preset -env
  • @babel/core
安装

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

问题

只能转换基本语法,如promise不能转换

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
					//预设:指示babel做怎么样的兼容性处理
          presets:[' @babel/ preset-env']
        }
      }
    ]
  }
  ...
}

2.全部js兼容性处理–> @babel/polyfill

安装

npm i @babel/polyfill -D

不需要配置loader,在js文件中直接引用即可

问题

我只要解决部分兼容性问题,但是@babel polyfill 将所有兼容性代码全部引入,会导致项目体积过大

3.需要做兼容性处理的就做:按需加载, core-js

安装

npm i core-js -D

module.exports = {
  ...
  module: {
    rules: [
      {
        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'  
          }
        }
      }
    ]
  }
  ...
}

压缩js代码

module.exports = {
  ..
  //生产环境下会自动压缩js代码
  mode: 'production'
  ..
}

压缩html

module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      //压缩
      minify: {
        // 移除空格
        collapseWhitespace: true,
        //移除注释
        removeComments: true
      }
    })
  ]
  ...
}

生产环境的配置

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',
  {
    loader: 'postcss-loader',
    options: [
      ident: 'postcss',
      plugins: () => [
        require('postcss-preset-env')()
       ]
    ]
	}
]

module.exports = {
  entry: './src/index. js',
	output: {
		filename: '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
        }
      },
      {
  			//在package.json中eslintConfig --> airbnb
				test: /\.js$/,
  			exclude: /node_modules/,
  			loader: 'babel-loader',
  			options: {
          presets: [
          	[
              '@babel/preset-env',
              options: {
								useBulit: 'usage',
              	corejs: {version: 3},
            		targets: {
									chrome: '60',
            			firefox: '50'
            		}
              }
            ]
        	]
        }
      },
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8*1024,
          name: '[hash:10].[ext]',
          output: 'imgs'
        },
        esModule: false
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
        options: {
          limit: 8*1024,
          name: '[hash:10].[ext]',
          output: 'imgs'
        }
      },
      {
        exclude: /\.(css|js|html|less|jpg|png|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
    	filename: 'css/built.css'
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        // 移除空格
        collapseWhitespace: true,
        //移除注释
        removeComments: true
      }
    })
  ],
  //模式
  mode: 'development'
}
  
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页