1、webpack
Webpack 就是一个前端资源加载/打包工具。
它的作用是将多种静态资源 js、css、less 转换打包成一个或多个 bundle,减少页面请求,优化性能。比如把多个JS打包成一个JS文件,把多个CSS文件打包到一个CSS文件,这样的话就不用一个个来导入。
Webpack 有5个关键核心点:
1、entry:它是导入模块和库的入口起点
2、output:告诉 webpack 在哪里输出它所创建的 bundles
3、loader:处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)打包起来,比如说CSS和图片等,需要转换才能打包
4、plugins:用来处理各种各样的任务,比如自动生成html文件,清除dist目录的插件等等。
5、modle:打包模式,development是没有压缩的,production是压缩的
2、webpack的基本打包配置
- 1、初始化:
yarn init -y
- 2、安装依赖包:
yarn add webpack webpack-cli -D
- 3、到package.json文件中配置scripts:
"scripts": { "build":"webpack --config webpack.config.js" }
4、配置webpack.config.js文件:
const path = require('path'); module.exports = { // 1、entry入口 entry: './src/index.js', // 2、output出口 output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, // 3、mode模式,development是没有压缩的,production是压缩的 mode: 'development', };
5、打包:yarm build
如果是vue打包的话,可以利用vue-cli脚手架自动生成webpack配置,然后npm run build打包即可
3、导入(require
)多个js文件打包成一个bundle.js
// 导入case1 require('../public/js/case1.js') // 导入jquery const $ = require('jquery') $(function () { $('#app li:nth-child(odd)').css('color', 'red') $('#app li:nth-child(even)').css('color', 'black') });
4、自动生成html文件(html-webpack-plugin)
1、安装:yarn add html-webpack-plugin -D
2、引入自动生成html的插件:const HtmlWebpackPlugin = require('html-webpack-plugin');
3、配置:plugins: [new HtmlWebpackPlugin({template: './src/index.html'})]
作用:不需要手动引入bundle.js,插件帮你完成
5、加载css文件(css-loader)
- 1、安装loader转换器:
yarn add style-loader css-loader -D
- 2、配置加载规则:
// 6、调用CSS文件,因为webpack只认识JSON和JS,所以需要配置loader module: { rules: [ { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { modules: true } } ] } ] }
6、分离css文件(mini-css-extract-plugin)
1、安装:yarn add mini-css-extract-plugin -D
2、引入:const MiniCssExtractPlugin = require('mini-css-extract-plugin');
3、配置:loader: MiniCssExtractPlugin.loader
4、调用:new MiniCssExtractPlugin({ filename: 'css/index.css' })
7、加载less文件(less-loader)
- 1、安装:
yarn add less less-loader -D
- 2、配置:
{ test: /\.less$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } }, 'css-loader', 'less-loader'] }
8、加载图片文件(url-loader)
- 1、安装:
yarn add url-loader file-loader -D
- 2、配置:
{ test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { limit: 8192 } } ] }
9、清除dist目录的插件(clean-webpack-plugin)
1、安装:yarn add clean-webpack-plugin -D
2、导入:const { CleanWebpackPlugin } = require('clean-webpack-plugin');
3、调用:
plugins: [ // 自动生成html文件 new HtmlWebpackPlugin({ template: './src/index.html' }), // 分离css文件 new MiniCssExtractPlugin({ filename: 'css/index.css' }), // 清除dist文件 new CleanWebpackPlugin() ],