本文手把手教你如何配置webpack，包括从安装nodejs到配置webpack.config.js，安装处理不同文件类型的loader，以及使用各种插件，如html-webpack-plugin、DefinePlugin和mini-css-extract-plugin。通过一步步实践，你将掌握webpack的基础配置技巧。
在开始之前首先需要安装nodejs工具,在官网下载直接安装就行了,安装完成后,在cmd输入npm,提示如下就安装成功了
1.首先创建一个文件夹,名字是项目的名字,自定义就好了,我的命名为"webpack_demo2",然后进入到文件夹
在当前路径下打开cmd,在当前目录按住shift再右键,会看到右键菜单里有一个"在此处打开命令行窗口"选项,点击即可
在命令行窗口输入:npm init 然后回车,然后填一下基本的信息,或者不用填,一路回车
之后就会生成一个package.json的文件
到目前为止,我们把初步的工作完成,但是npm工具下载太慢了,用淘宝的镜像cnpm工具,直接在cmd命令行输入:npm i cnpm -g
就行了.
2.接下来是安装webpack,注意webpack4.0之后的版本,都要安装webpack-cli命令行工具
在当前目录cmd输入:cnpm i webpack webpack-cli -D
这样就安装成功了,此时package.json就变成了这样,里面记录了webpack的版本号,这样以后就不会引入错误
然后再添加dist和src文件夹,并在src文件夹添加index.js文件
在cmd输入:npx webpck (npx的作用当前文件夹的webpack)
这时webpack会默认将/src/index.js文件打包在/dist文件夹下,并命名main.js
然后在package,json添加两条命令,
{
"dev":"npx webpack --mode development",
"build":"npx webpack --mode production"
}
这样就可以在命令行直接输入:npm run dev 或者npm run build 进行打包
3.接下来在根文件夹下,创建webpack.config.js文件(刚开始一定要用这个名字webpack.config.js)
module.exports={
//需要打包的输入文件
entry:{
index1:"./src/index.js"
},
//打包的输出文件
output:{
filename:"[name].js",//[name].js代表输出文件的名字,这里是index1.js
path:__dirname+"/dist"//__dirname 代表当前的绝对路径 (这里不能用相对路径,只能用绝对路径)
}
}
输入命令:npm run dev ,webpack自动会加载webpack.config.js配置文件,现在我们已经完成了基本的功能
4.安装loader加载
4.1 安装css-loader,style-loader (处理css文件的)
1.cmd输入:
cnpm i css-loader style-loader -D 2.修改配置文件webpack.config.js,向里面添加
module:{
rules:[
{
test:/\.css$/,//正则表达式,匹配以.css结尾的文件
use:["style-loader","css-loader"]//使用什么loader,注意是从右向左解析,css-loader的作用读取解析css,
//style-loader的作用将css代码转成style形式插入js文件中
}
]
} 
3.测试
/src/index.js代码 :
import "./app.css"
console.log("打印1")/src/app.css代码:
div{
color:green;
}结果:能正确打包,说明没问题
4.2 安装url-loader,file-loader (处理图片和文件的)
1.cmd输入:
cnpm i url-loader file-loader -D2.修改配置文件webpack.config.js,向里面添加
{
test:/\.(png|jpg|gif)$/,
use:[
{
loader:"url-loader",
options:{
limit:8192
}
}
]
} 
3.测试
/src/index.js代码 :
import "../asset/test.jpg" //在根路径创建文件夹,并放一张test.jpg的图片
console.log("打印1")
结果:能正确打包,说明没问题
4.3 安装 babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env (作用是将ES6+转成ES5)
1.cmd输入:
cnpm i babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env -D2.修改配置文件webpack.config.js,向里面添加
{
test:/\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
} 
3.测试
/src/index.js代码 :
const f1=()=>{
console.log("箭头函数")
}结果:能正确打包,说明没问题
4.4 安装scss-loader(处理scss文件的,没用到的,可以跳过)
1.cmd输入:
cnpm i sass-loader node-loader node-sass -D 2.修改配置文件webpack.config.js,向里面添加
module:{
rules:[
{
test:/\.scss$/,//正则表达式,匹配以.css结尾的文件
use:["css-loader","sass-loader"]//使用什么loader,注意是从右向左解析,sass-loader的作用读取解析scss,
//css-loader的作用将CSS 转化成 CommonJS 模块
}
]
}
3.测试
/src/index.js代码 :
import "./app.scss"
console.log("打印1")/src/app.scss代码:
$red:red;
*{
color:$red;
}结果:能正确打包,说明没问题
4.5 安装typescript(处理typescript文件的,如果没用到,可以跳过)
1.cmd输入:
cnpm i typescript ts-loader -D 2.修改配置文件webpack.config.js,向里面添加
module:{
rules:[
{
test:/\.ts$/,//正则表达式,匹配以.css结尾的文件
use:["ts-loader"]
}
]
}在根目录添加tsconfig.json文件:
tsconfig.json文件:
{
"compilerOptions": {
// 包含es6 es7 和commonjs
"module": "commonjs",
// 目标运行环境
"target": "es5",
// 是不是允许 js语法
"allowJs": true,
},
"include": [
"./src/*"
],
"exclude": [
"./node_modules"
]
}3.测试
/src/index.js代码 :
import "./app.ts"
console.log("打印1")/src/app.ts代码:
const hello:string="I am ts";
console.log(hello)结果:能正确打包,说明没问题
5.插件的安装
5.1 安装html-webpack-plugin(用来打包生成主html页面)
1.cmd输入:
cnpm i html-webpack-plugin -D2.修改配置文件webpack.config.js,添加
plugins:[
//生成html入口文件的插件
new HtmlWebpackPlugin({
title: 'My App',//标题的名字
filename: './index.html',//打包后生成的html名字
template:"./src/temp.html",//模板,可省略
})
}
3 测试
无自定义模板的情况,直接cmd:npm run dev ,就可以看到打包好的index.html
有自定义模板的情况:
/src/temp.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My App</title>
</head>
<div id="vue_id">
这是我的html模板,打包的时候,其他的文件会添加进来
</div>
<body>
</html>cmd:npm run dev ,就可以看到打包好的index.html,说明成功了
5.2 安装DefinePlugin(全局变量定义)
1.这个插件是webpack内置的,直接引入webpack即可,在webpack.config.js头部添加
const webpack=require("webpack")2.修改配置文件webpack.config.js,添加
plugins:[
//全局的自定义变量的插件
new webpack.DefinePlugin({
VERSION: JSON.stringify("5fa3b9"),//在任何地方都可以直接用VERSION这个常量
"process.env.NODE_ENV":JSON.stringify("999999999999"),//在任何地方都可以直接用process.env.NODE_ENV这个常量
}),
]
3 测试
/src/index.js:
console.log(VERSION,process.env.NODE_ENV)cmd:npm run dev ,打开打包好的index.html,看结果
5.3 安装mini-css-extract-plugin(用来打包生成的css分离成单独一个文件)
1.cmd输入:
cnpm i mini-css-extract-plugin -D2.修改配置文件webpack.config.js,头部添加
const MiniCssExtactPlugin=require("mini-css-extract-plugin")webpack.config.js里面添加:
plugins:[
//将css文件分开打包
new MiniCssExtactPlugin({
filename:"[name].css", //[name] 就是原来css文件那个名字
chunkFilename:"[id].css" //块id
}),
}
3 测试
cmd:npm run dev ,能正确打包,并且打包后生成新的css文件,说明打包成功了
265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
