//创建文件夹
mkdir webpack4demo//进入
cd webpack4demo//初始化
npm init - y
之前
index.js
const s=()=祝辞{
控制台。日志(init”)
｝
年代()
之前
webpack.config.js
const path=要求(“路径”);
模块。出口={
条目:{
指数:”。/脚本/索引。js”//入口文件,若不配置webpack4将自动查找src目录下的index.js文件
},
输出:{
文件名:“[名字].bundle.js ",//输出文件名,(名字)表示入口文件js名
路径:路径。加入(__dirname,“距离”)//输出文件路径
｝
｝
之前
创建索引。html,并引入js
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>标题& lt;美元/title>
& lt;/head>
& lt; body>
结束美元
& lt;/body>
& lt;脚本src=" https://www.yisu.com/zixun/dist/index.bundle.js "祝辞& lt;/script>
& lt;/html>
之前
打开浏览器将会看到之前设置的js文件生效
创建a.js、c.js a.css,更改指数。js
a.js
从“进口acss。/a.css '
从“进口c。/c.js '
const={
init () {
控制台。日志(“init bbbaaa”)
},
cinit () {
c.init ()
｝
｝
出口违约;
之前
c.js
const c={
init () {
console.log (“ccccc”)
｝
｝
出口默认c;
之前
a.css
身体{
background - color: # 6 b0392;
｝
之前
index.js
导入一个从“/a.js。”
从“进口c。/c.js '
const s=()=祝辞{
a.init ()
a.cinit ()
c.init ()
控制台。日志(init”)
｝
年代()
之前
配置webpack.config。js文件
const path=要求(“路径”);
模块。出口={
条目:{
指数:”。/脚本/index.js”
},
输出:{
文件名:“[名字].bundle。(哈希). js”,//(散列)会在后面生成随机散列值
路径:路径。加入(__dirname,“距离”)
},
模块:{//处理对应模块
规则:[
{
测试:/\ . css/美元,
用途:[' style-loader ', ' css-loader ']//处理css
｝
]
},
｝
之前
npm安装style-loader css-loader——save-dev
执行webpack——模式发展将会看到一个带md5值得js文件,将他引入html中
, 
安装url-loader, file-loader
npm安装url-loader file-loader——save-dev
修改。css将一张图片放到脚本目录
身体{
背景图片:url (“。/timg.jpg”);
background - color: # a748ca;
｝
之前
配置webpack.config。js文件
模块:{
规则:[
{
测试:/\ . css/美元,
使用:[' style-loader ', ' css-loader ']
},
{
测试:/\。(png | jpg | gif)/美元,
用途:[{
装载机:“url-loader”,
选择:{
outputPath:图像/,//输出到图像文件夹
限制:500//是把小于500 b的文件打成Base64的格式,写入JS
｝
})
｝
]
},
