webpack的安装以及配置

系统管理员 2023-06-07 03:09 37阅读 0赞

## 安装基本依赖（4.0版本） ##

webpack项目的两个核心基础模块是**webpack**和**webpack-cli**，这是webpack项目构建的前提

npm i webpack webpack-cli -D

## 运行webpack（打包文件） ##

webpack 入口文件路径 输出文件路径

webpack  src/js/main/js  dist/bundle.js

**此时首页引用的main.js文件要修改为bundle.js文件，引用的路径是需要修改的**

## 使用webpack配置文件（webpack.config.js）简化打包命令 ##

运行webpack命令的时候，webpack需要指定文件入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径

//导入处理路径的模块
    const path=require("path");
    //暴露一个配置对象，将来，webpack在启动的时候会默认来查找webpack.config.js，
    //并读取这个文件中导出的配置对象，来进行打包处理
    moudule.exports={ 
    	entry:path.join(__dirname,"src/js/main"),//项目入口文件
    	output:{ 
    		path:path.join(__dirname,"dist"),//配置输出路径
    		filename:“bundle.js”//配置输出文件的文件名
    	}
    }

## 实现webpack的实时打包构建 ##

由于每次重新修改代码之后，都需要手动运行webpack打包敏玲，比较麻烦，所以使用webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动安装打包构建  
**安装webpack-dev-server包**

cnpm i webpack-dev-server -D

**package.json文件中的配置**  
在scripts节点下新增"dev"

"scripts":{ 
    	"dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"
    }

–open 自动打开浏览器  
–port 3000 指定端口号  
–contentBase src 指定托管的根目录  
–hot 启动热更新（在修改代码后不用刷新整个页面就能更改修改部分的界面）

**注意事项：实现实时打包后，bundle.js文件会保存在内存中，而此时index.html引用的bundle.js文件是根目录下的bundle.js文件，所以引用的路径是需要修改成根目录下的bundle.js，如果不修改，则修改代码后，页面不会更新**

## 使用html-webpack-plugin插件配置启动页面 ##

由于使员工–contentBase src 指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性，所以我们可以使用html-webpack-plugin插件配置启动页面

1.  安装

cnpm i html-webpack-plugin -D

1.  设置webpack.config.js配置文件

//导入处理路径的模块
    const path=require("path");
    //导入自动生成HTML文件的插件
    const htmlwebpackplugin=require("html-webpack-plugin");
    module.exports={ 
    	entry:path.join(__dirname,"src/js/main.js"),//项目入口文件
    	output:{ //配置输出选项
    		path:path.join(__dirname,"dist"),//配置输出的路径
    		filename:"bundle.js"//配置输出的文件名
    	}
    	plugins:[//添加plugins节点配置插件
    		new htmlwebpackplugin({ 
    			temlate:path.join(__dirname,"src/index.html"),//模板路径
    			filename:"index.html"//自动生成的HTML文件的名称
    		})
    	]
    }

1.  将index.html中的script标签注释掉，因为html-webpack-plugin插件会自动把bundle.js注入到index.html页面中

## 使用webpack打包css文件 ##

1.  在main.js中导入css文件（使用es6语法：import）

import "./src/index.css"

1.  安装 style-loader和css-loader

cnpm i style-loader css-loader -D

1.  修改webpack.config.js配置文件，在module.exports暴露的对象中添加module节点

module:{ //用来配置第三方loader模块的
    	rules:[//文件的匹配规则
    		{ test:/\.css$/,use:["style-loader","css-loader"]}//处理css文件的规则
    	]
    }

1.  use表示使用哪些模块数理test所匹配到的文件；use中相关的loader模块调用的顺序是从后往前调用的；

## 使用webpack打包less文件 ##

1.  在main.js中导入css文件（使用es6语法：import）

import "./src/less.css"

1.  安装 less-loader和less

cnpm i less-loader less -D

1.  修改webpack.config.js配置文件

module:{ //用来配置第三方loader模块的
    	rules:[//文件的匹配规则
    		{ test:/\.css$/,use:["style-loader","css-loader"]},//处理css文件的规则
    		{  test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }//处理less文件的规则
    	]
    }

## 使用webpack打包sass文件 ##

1.  在main.js中导入css文件（使用es6语法：import）

import "./src/sass.css"

1.  安装 sass-loader和node-sass

cnpm i sass-loader node-sass -D

1.  修改webpack.config.js配置文件

## 使用webpack处理css中的路径 ##

1.  安装url-loader和file-loader

cnpm i url-loader file-loader -D

1.  在webpack-config-js中添加处理url路径的loader模块

{ test:\./(png|jpg|gif)$\,use:"url-loader"}

1.  可以通过limit指定进行base64编码的图片大小；只有小于字节的图片才会进行base64编码