webpack----前端打包工具
将多个模块的按依赖关系打包成一个或多个静态资源。
功能：模块打包、通过loader进行文件转换、代码拆分按需加载、扩展插件。
webpack主要包括 入口、输出、加载器、插件。
通过entry入口配置依赖；
通过output指定打包后输出文件命名及路径；
webpack本身只能处理js，通过loader可以处理css等其他类型文件；
通过plugins可以在打包时执行特定任务，比如 代码压缩、生成html文件等；
webpack5搭建：
1、npm init // 在空文件夹初始化package.json
2、npm install webpack webpack-cil //安装webpack及webpack-cil依赖包；
3、在utils中index.js写export const的一些通用方法；
4、在main.js中将3的方法导入，import {} from './utils/index'；
5、在public中新建index.html,可通过!+Enter快捷键迅速搭建html基本框架，并修改title，在body写入id=app的div；
正式进入配webpack：
6、在webpack.config.js配置入口文件：
javascriptconst webpack = require('webpack'); module.exports = { //指定为开发模式，dev开发，pro生产，开发模式不会执行代码压缩和优化，生产会 mode:'dev', entry:{ main: './src/main.js'}, //入口文件 output:{ //出口文件 path:path.resolve(__dirname, 'dist'), //__dirname,为当前文件的绝对路径 //使用由生成的内容产生hash，输出在dist文件夹的chunk.js下 filename: 'js/chunk-[contenthash].js' } }安装开发服务器：npm install --save-dev webpack-dev-server
javascript//const webpack = require('webpack'); module.exports = { // mode:'dev', //指定为开发模式，dev开发，pro生产 // entry:{ main: './src/main.js'}, //入口文件 // output:{ //出口文件 // path:path.resolve(__dirname, 'dist'), //__dirname,为当前文件的绝对路径 //使用由生成的内容产生hash，输出在dist文件夹的chunk.js下 // filename: 'js/chunk-[contenthash].js' // } devServer: { contentBase:path.join(__dirname, 'dist'), compress: true, port: 8080, } }7、在package.json中创建一个运行webpack的构建脚本：在scripts中添加
eg: build: 'webpack'
8、在终端运行：npm run build，目录生成dist文件夹及目录下的chunk文件
要添加插件，生成html：
9、npm install html-webpack-plugin -D //安装插件
10、在webpack.config.js引入：
javascript//const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { // mode:'dev', //指定为开发模式 // entry:{ main: './src/main.js'}, //入口文件 // output:{ //出口文件 // path:path.resolve(__dirname, 'dist'), //__dirname,为当前文件的绝对路径 //使用由生成的内容产生hash，输出在dist文件夹的chunk.js下 // filename: 'js/chunk-[contenthash].js' // }, //可能插入多个插件，所以是数组形式 plugins: [ new HtmlWebpackPlugin({ template:'./public/index.html //指定模板文件 filename:'index.html', //打包后生成名称 inject:'body' //js插入body }) ], }
要添加css文件，进行加载：
11、在src/style/page.css书写通用样式；
12、在main.js引入：import './style/page.css';
13、npm install css-loader style-loader // 安装loader依赖包处理css文件
14、在webpack.config.js添加：
javascript//const webpack = require('webpack'); //const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { // mode:'dev', //指定为开发模式 // entry:{ main: './src/main.js'}, //入口文件 // output:{ //出口文件 // path:path.resolve(__dirname, 'dist'), //__dirname,为当前文件的绝对路径 //使用由生成的内容产生hash，输出在dist文件夹的chunk.js下 // filename: 'js/chunk-[contenthash].js' // } //可能插入多个插件，所以是数组形式 // plugins: [ // new HtmlWebpackPlugin({ // template:'./public/index.html //指定模板文件 // filename:'index.html', //打包后生成名称 // inject:'body' //js插入body // }) // ], module: { rules:[ { test: /\.css$/, //正则匹配css文件 // 从后往前加载，先css-loader，再style-loader use: ['style-loader','css-loader'] } ] } }
处理图像资源：
15、在src新建images存放图片
16、在main.js中引入：
javascriptimport img from './images/img.jpg' const image = document.createElement('img'); image.src = img; document.body.appendChild(image);17、npm i file-loader url-loader -D
18、在webpack.config.js添加配置：
javascript//const webpack = require('webpack'); //const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { // mode:'dev', //指定为开发模式 // entry:{ main: './src/main.js'}, //入口文件 // output:{ //出口文件 // path:path.resolve(__dirname, 'dist'), //__dirname,为当前文件的绝对路径 //使用由生成的内容产生hash，输出在dist文件夹的chunk.js下 // filename: 'js/chunk-[contenthash].js' // } //可能插入多个插件，所以是数组形式 // plugins: [ // new HtmlWebpackPlugin({ // template:'./public/index.html //指定模板文件 // filename:'index.html', //打包后生成名称 // inject:'body' //js插入body // }) // ], module: { rules:[ //{ // test: /\.css$/, //正则匹配css文件 // 从后往前加载，先css-loader，再style-loader // use: ['style-loader','css-loader'] //} { test:/\.(png|jpg|gif|jpeg|webp|svg|ico)$/, // 正则匹配图片文件 type:'asset', // 使用asset模块 generator:{ //生成输出文件-配置输出文件名 filename:'img/[name].[hash:6][ext]' }, parser:{ //匹配图片大小 dataUrlCondition:{maxSize:10*1024} //图片大小小于10kb } } ] } }
每次执行npm run build生成的js文件实现覆盖：
19、在webpack.config.js的output里配置：
javascript//const webpack = require('webpack'); //const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { // mode:'dev', //指定为开发模式 // entry:{ main: './src/main.js'}, //入口文件 output:{ //出口文件 // path:path.resolve(__dirname, 'dist'), //__dirname,为当前文件的绝对路径 //使用由生成的内容产生hash，输出在dist文件夹的chunk.js下 // filename: 'js/chunk-[contenthash].js', clean:true } //可能插入多个插件，所以是数组形式 // plugins: [ // new HtmlWebpackPlugin({ // template:'./public/index.html //指定模板文件 // filename:'index.html', //打包后生成名称 // inject:'body' //js插入body // }) // ], // module: { // rules:[ //{ // test: /\.css$/, //正则匹配css文件 // 从后往前加载，先css-loader，再style-loader // use: ['style-loader','css-loader'] //} // { // test:/\.(png|jpg|gif|jpeg|webp|svg|ico)$/, // 正则匹配图片文件 // type:'asset', // 使用asset模块 // generator:{ //生成输出文件-配置输出文件名 // filename:'img/[name].[hash:6][ext]' // }, // parser:{ //匹配图片大小 // dataUrlCondition:{maxSize:10*1024} //图片大小小于10kb // } // } // ] // } }