webpack打包的基本操作

最新推荐文章于 2023-07-26 20:30:00 发布

qq_19176681

最新推荐文章于 2023-07-26 20:30:00 发布

阅读量196

点赞数

本文链接：https://blog.csdn.net/qq_19176681/article/details/103561635

版权

本文详细介绍了webpack的配置和打包过程，包括初始化项目、安装依赖、配置入口文件、使用webpack-dev-server、处理CSS和Less文件、处理图片和字体、转换ES6+语法、配置Vue、压缩JS代码等关键步骤。

摘要由CSDN通过智能技术生成

1、打开项目输入npm init -y，
2、创建main.js //项目的JS入口文件
3、安装cnpm i webpack-dev-server -D 自动打包工具
4、项目本地需要安装webpack
①cnpm i webpack -D
②cnpm install webpack-cli --save-dev
5、配置文件webpack.config.js
const path = require(‘path’);
module.exports = {
//入口，表示要使用webpack打包那个文件
entry: path.join(__dirname, ‘./src/main.js’),

	 //出口，输入文件相关的配置
		output: {
   		 //指定打包好的文件，输出到哪个目录
    			path: path.join(__dirname, './dist'),
   			//指定存储为哪个文件名称
    			filename: 'bundle.js'
  	}

}

6、实时打包需要在package.json里面添加脚本在scripts下添加
｛ “dev”: “webpack-dev-server --open --port 3000 --contentBase src --hot”｝；
open:true,//自动打开浏览器
port:3000,//启动时运行端口
contentBase:‘src’,//指定托管的根目录
hot:true//启用热更新
7、安装cnpm i html-webpack-plugin -D
配置文件webpack.config.js设置
1）const htmlwebpackPlugin = require(‘html-webpack-plugin’)
2）module.exports = {
plugins:[
new htmlwebpackPlugin({
template: path.join(__dirname, ‘./src/index.html’),//指定模版页面
filename: ‘index.html’//指定生成页面的名称
})
]
}

8、测试先输入webpack指令看是否报错，正常就可执行npm run dev 自动打包热更新等

9、如果需要打包css文件Less,需要安装插件，并且需要在入口文件先导入对应的css或less文件

##*cnpm i  style-loader css-loader -D   、## cnpm i less-loader less -D*
并且需要在webpack.config.js配置如下

module.exports = {
   
	module: {
   //这个节点用于配置所有第三方loader模块加载器
        rules: [//所有第三方模块的匹配规则
            {
   test: /\.css$/,use:['style-loader','css-loader']},//处理配置第三方loader规则
            {
   test: /\.less$/,use:['style-loader','css-loader','less-loader']}
        ]
    }
｝