初始化一个目录
1、用npm init --yes生成一个packge.json
npm init --yes2、局部安装cnpm i webpack webpack-cli --save -dev
cnpm i webpack webpack-cli --save-dev 在项目终端3、全局安装 cnpm i -g webpack webpack-cli --save -dev
cnpm i -g webpack webpack-cli --save-dev 在项目终端默认webpack只能识别js文件，如果要识别打包其他格式文件，需要安装loader(加载器)
1、 css loader 可以打包css文件 。 安装css-loader style-loader
cnpm i css-loader style-loader --save-dev2、引入css用require 要加!style-loader!css-loader!、例如
require("!style-loader!css-loader!..css/index.css")一般来说：都是以将一些编译选项放在配置文件(webpack.config.js)中，以便于统一管理：
1、在目录下面建一个 webpack.confifig.js 配置文件 如下：
module.exports = {
entry: './src/index1.js', // 打包的入口文件
output: { //打包输出配置
path: __dirname + '/dist', // 打包路径输出的目录,__dirname是webpack.config.js
filename: 'main.js' // 打包之后输出文件名
},
mode："development", //打包环境配置，含有production和development
module:{ //模块配置
rules: [ //loader的规则配置
{
test: /\.css$/, //是一个正则表达式，设置loader文件的规则，以.css结尾
use:['style-loader','css-loader'] //如果是.css结尾的文件用use数组的loader，注意有先后顺序，数组项越靠后越先执行
}
]
},
watch: true; //监听文件改动，并且自动打包
}接下来我们只需要执行 webpack 命令即可生成 main.js 文件 ,也可以在packge.json里做成一个配置项，运行时候执行该代码,，把webpack命令改为用npm build打包。
"scripts": {
"build": "webpack"
}默认是把css和js打包到同一个文件中，如果要将css单独打包到一个文件，需要安装MiniCssExtractPlugin插件
cnpm i mini-css-extract-plugin --save--dev然后引入插件
const miniCssExtractPlugin=require('mini-css-extract-plugin'); //引入插件
module.exports = {
entry: './src/index1.js', // 打包的入口文件
output: { //打包输出配置
path: __dirname + '/dist', // 打包路径输出的目录,__dirname是webpack.config.js
filename: 'main.js' // 打包之后输出文件名
},
mode："development", //打包环境配置，含有production(产品环境)和development
module:{ //模块配置
rules: [ //loader的规则配置
{
test: /\.css$/, //是一个正则表达式，设置loader文件的规则，以.css结尾
use:[{
loader:miniCssExtractPlugin.loader //需要使用插件去加载css
},'css-loader'] //如果是.css结尾的文件用use数组的loader，注意有先后顺序，数组项越靠前越先执行
}
]
},
plugins: [
new miniCssExtractPlugin({
filename:'[name].css' //输出的css文件名，放置在dist目录下,[name]和output配置的文件名一致
})
],
watch: true; //监听文件改动，并且自动打包
}压缩css/js代码 使用optimize-css-assets-webpack-plugin插件来压缩css代码。
cnpm i optimize-css-assets-webpack-plugin --save--dev
const opimizeCss=require('optimize-css-assets-webpack-plugin'); // 引入压缩css插件
module.exports = {
entry: './src/index1.js', // 打包入口
output: {
path: __dirname + '/dist', // 输出路径
filename: 'main.js' // 输出文件名
},
optimization:{ //webpack的css压缩
minimizer:[
new opimizeCss() //实例化压缩配置插件
]
}
}没有压缩js 可以使用 npm i -D uglifyjs-webpack-plugin 插件压缩js
cnpm i uglifyjs-webpack-plugin --save--dev
//webpack.config.js
const uglifyJsWebpackPlugin=require('uglifyjs-webpack-plugin') //引入压缩js的插件
module.exports = {
optimization:{
minimizer:[
new opimizeCss() //实例化css压缩配置插件
new uglifyJsWebpackPlugin({ //js压缩插件
cache:true, //是否缓存js
parallel:true, //是否并发打包，同时打包多个js文件 效率更高
sourceMap:true //打包后的代码与源码的映射，方便调试
})
...
]
...
}打包scss文件，需要sass-loader node-sass
npm install sass-loader node-sass --save-dev同样需要配置到webpack.config.js加入打包.scss
{
test: /\.scss$/, //以.scss结尾的
use: [
{
loader:miniCssExtractPlugin.loader,
},
'css-loader', // 解析css
'sass-loader' //解析sass-loader
]
}打包图片，webpack5自带图片打包loader，需要配置一下
const miniCssExtractPlugin=require('mini-css-extract-plugin');
const opimizeCss=require('optimize-css-assets-webpack-plugin');
module.exports = {
entry: './src/index1.js', // 打包入口
output: {
path: __dirname + '/dist', // 输出路径
filename: 'main.js', // 输出文件名
assetModuleFilename: "imgs/[name].[hash:8].[ext]", //配置图片输出目录,[name]保留图片名，[hash:8]生成8位随机的hash值，保留图片后缀
},
optimization:{
minimizer:[
new opimizeCss()
]
},
mode: "production",// 打包环境设置 production 和 development
module: {
rules: [ // 其中包含各种loader的使用规则
{
test: /\.css$/,
use: [
{
loader:miniCssExtractPlugin.loader,
},
'css-loader', // 解析css
]
},
{
test: /\.(png|jpg|gif|svg|jpeg)$/, //配置打包js文件里面的图片
type: "asset/resource", //图片文件用webpack5自带的静态文件loader
generator: {
filename: 'imgs/[name].[hash:8].[ext]', //打包后的图片名称name是图片 名， [hash:8]是随机8位的hash值 [ext]指图片格式
}
}
]
},
plugins: [
new miniCssExtractPlugin({
filename:'[name].css' //输出的css文件名，放置在dist目录下
})
],
watch: true // 监听文件改动并自动打包
};js里面引入图片用require
HTML单文件和多文件打包
使用插件(plugins)对HTML文件进行处理(html-webpack-plugin)
1、 下载安装 cnpm i -D html-webpack-plugin
cnpm i html-webpack-plugin --save--dev2、配置到webpack.config.js
const HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports = {
//entry: './src/index1.js', // 单文件入口
entry:{ //多入口文件，属性是打包后的js文件
common:['./common.js','./util.js'],
index:'./index.js',
home:'./home.js'
}
output: {
path: __dirname + '/dist', // 输出路径
//filename: 'main.js', // 输出文件名，只能用于单文件入口
filename:'[name].[hash:8].js', //保留入口文件的js文件名+随机八位hash数
assetModuleFilename: "imgs/[name].[hash:8].[ext]", //配置图片输出目录,[name]保留图片名，[hash:8]生成8位随机的hash值，保留图片后缀
},
new HtmlWebpackPlugin({
template: "./index.html", // 打包的html文件
inject: 'head', // js脚本注入的位置，可以是head, body，或者为 false默认
filename: "index.html", // 打包后的文件名
chunks: ['common','index'], //引入指定js文件
minify: {
collapseWhitespace: true, //去掉HTML多余的换行和空格
removeComments: true, //去掉HTML的注射
}
})
new HtmlWebpackPlugin({
template: "./home.html", // 打包的html文件
inject: 'head', // js脚本注入的位置，可以是head, body，或者为 false默认
filename: "home.html", // 打包后的文件名
chunks: ['common','home'], //引入指定js文件
minify: {
collapseWhitespace: true, //去掉HTML多余的换行和空格
removeComments: true, //去掉HTML的注射
}
})
}打包多少个HTML就copy多少个new HtmlWebpackPlugin({ }）
打包前要清除dist目录(如果不清除，改了文件名之后容易出现垃圾文件），cnpm i -D clean-webpack-plugin 安装插件
cnpm i clean-webpack-plugin --save--dev
const {CleanWebpackPlugin} = require('clean-webpack-plugin') //需要将该插件解构出来
plugins: [
new CleanWebpackPlugin(),
new miniCssExtractPlugin({...})
]webpack开发环境配置
1.安装webpack-dev-server，配置一个webpack的开发服务器，每次build都会保留在内存，
cnpm i webpack-dev-server --save--dev2. 在web.confifig.js中添加服务器配置(注意：使用开发环境 watch要改为false）:
devServer: {
port: 8080 //端口号 ，用http：//localhost:8080访问。，默认浏览器会去找index.HTML
},3. 启动命令 webpack serve --mode development
4. 也可以把该命令配置到npm命令中，npm run dev 启动
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack serve --mode development"
}
4201
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
