webpack基本使用
1.创建项目
创建一个空目录作为项目根目录，在命令行中执行以下命令来对项目进行初始化，生成package.json文件：npm init -y
创建项目文件
在项目根目录中创建一个src/index.js文件
2.下载webpack
在项目中执行以下命令局部安装webpack相关工具：npm i webpack webpack-cli -D
3.执行webpack
可以通过以下命令，让webpack对项目代码进行转换：npx webpack
4.小结
总结webpack的几个功能：1.能够将浏览器无法识别的js代码，转换为浏览器能够识别的代码语法；
2.能够将多个js文件合并成一个js文件;
3.能够将js代码进行压缩，删除不必要的空格、换行等。
webpack介绍
webpack是一个前端资源构建工具，是一个静态模块打包器。前端资源
在一个前端项目中，我们将项目中的所有html、css、js、图片等，称为前端资源。所以，前端资源构建，指的是对这些代码图片等进行构建构建工具
在实际项目开发中，有很多的代码是浏览器不能识别的，所以这个时候，我们需要借助一些工具，棒我们把各种浏览器不能识别的代码都转换为浏览器能够识别的代码。在以前，不同类型的代码，需要不同的工具进行转换。所以，前端就提出构建工具的概念，就是找一个大工具，把这些小工具的功能都包含进来，对于开发者来说，就只需要学习这个大工具的使用就可以了。
webpack就是这种大工具（构建工具）的其中一种。
静态模块
通过我们对vue的学习，我们可以看到，项目中所有的代码都是通过import语法进行互相引入，而在整个项目中，都有一个入口js文件，来对所有的代码进行统一管理。webpack在进行打包时，会找到入口js文件，以该文件为起点，找到该文件中所有依赖的模块，统一进行打包处理。
webpack的默认配置
webpack默认只能对js文件进行打包处理。webpack默认配置了三个属性：
1.打包的入口文件：src/index.js
2.打包的出口文件：dist/main.js
3.打包的模式：production
更改默认配置
webpack的配置文件是项目根目录中的webpack.config.js文件，当我们执行打包命令npx webpack时，webpack会自动去查找webpack.config.js文件并使用其中的配置信息来进行打包。webpack.config.js文件需要手动去创建。
打包的入口文件
module.exports = {
//entry:配置打包入口文件地址
entry:'./src/home.js'
}
打包的出口文件
const path = require('path');
module.exports = {
//output:配置打包出口文件
output:{
//打包出口文件的目录路径（绝对路径）
path:path.resolve(__dirname,'dist'),
//打包出口文件的文件名
filename:'index.js'
}
}
打包的模式
webpack的打包模式分为两种：development（开发模式）、production（生产模式）
module.exports = {
mode:'development'
}
loaders转换器
由于webpack自身只能打包js代码，也就意味着，当我们的项目里面，使用了css、less、sass等浏览器不能识别的代码时，webpack默认是不能对这些代码进行处理的。这个时候，我们就需要在webpack中引入一些其他的工具。而这些工具，我们就称之为loaders。loaders的基本配置
所有loaders的配置，都是在module.rules的数组中进行配置：module:{
rules:[
]
}
css打包配置
下载loadersnpm i style-loader css-loader -D
配置loaders
以打包css为例
module:{
rules:[
//打包css
{
//test用于配置当前打包规则要匹配的文件名
test:/\.css$/i,
//use用于配置当前打包规则所使用的loader
use:['style-loader','css-loader']
}
]
}
less打包配置
下载loadersnpm i less less-loader -D
配置loaders
module:{
rules:[
//打包css
{
//test用于配置当前打包规则要匹配的文件名
test:/\.css$/i,
//use用于配置当前打包规则所使用的loader
use:['style-loader','css-loader'],
//exclude用于配置webpack不需要解析的文件名
exclude:/node_modules/,
},
//打包less
{
test:/\.less$/i,
use:['style-loader','cee-loader','less-loader'],
exclude:/node_modules/,
}
]
}
scss打包配置
下载npm i node-sass sass-loader -D
npm i node-sass -D --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
配置
{
test:/\.scss/i,
use:['style-loader','css-loader','sass-loader'],
exclude:/node_modules/,
}
plugins插件
plugins插件的基本配置
module.exports = {
//插件配置
plugins:[
]
}
html-webpack-plugin
下载npm i html-webpack-plugin -D
引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
配置使用
module.exports = {
//插件配置
plugins:[
new HtmlWebpackPlugin({
template:'./index.html'
}),
]
}
clean-webpack-plugin
下载npm i clean-webpack-plugin -D
引入
const {CleanWebpackPlugin } = require('clean-webpack-plugin');
配置使用
module.exports = {
//插件配置
plugin:[
new CleanWebpackPlugin()
]
}
mini-css-extract-plugin
下载npm i mini-css-extract-plugin -D
引入
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
配置使用
module.exports = {
module:{
rules:[
{
test:/\.css$/i,
use:[MiniCssExtractPlugin.loader,'css-loader'],
exclude:/node_modules/,
},
]
},
plugins:[
new MiniCssExtractPlugin({
filename:'./css/style.css'
})
]
}
devServer
该属性主要针对开发过程中的服务器的设置下载webpack-dev-server
npm i webpack-dev-server -D
配置启动命令
在package.json文件中的script属性中添加以下代码：
"scripts":{
"dev":"webpack-dev-server"
},
启动服务器
npm run dev
启动过程中，可能会出现以下报错：
Cannot find module 'webpack-cli/bin/config-yargs'
该报错的原因是由于webpack-cli（4.3.0）的版本与webpack-dev-server（3.11.0）版本冲突,需要将webpack-cli的版本降低为3.x的版本：
npm uninstall webpack-cli
npm i webpack-cli@3 -D
低版本下载完成后，重新执行启动命令npm run dev启动服务器。
注意：该服务器打包后的代码是保存在内存中的，浏览器访问代码时也是直接访问内存中打包好的代码。
其他配置
该服务器还可以通过devServer属性进行一些额外的配置：devServer:{
open:true,
hot:true,
//...
}
