1.安装webpack之前需要安装
- node.js
- 淘宝的镜像及其命令cnpm
npm install cnpm -g
2.安装webpack
- 使用 cnpm 安装 webpack
cnpm install webpack -g - 使用cnpm安装webpack-cli
cnpm install webpack-cli -g
3.创建项目（使用webpack.config.js）
（1）用到的文件
在某目录下新建文件夹（app）,在app文件夹里，新建文件‘index.html’ ,‘runoob1.js’,'runoob2.js'，‘style.css’，以配置文件webpack.config.js
index.html文件:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
runoob1.js文件:
require("!style-loader!css-loader!./style.css");
document.write(require("./runoob2.js"));
//注：require("!style-loader!css-loader!./style.css")之间不能有多余的符号，否则会出错，如require("!style-loader!css-loader!./style.css ")// ,在style.css后加了空格就会报错Can't resolve 'style.css ' in ...
runoob2.js文件:
module.exports = "It works from runoob2.js.";
style.css文件:
body {
background: yellow;
}
webpack.config.js文件:
webpack.config.js为配置文件 ，可以在此文件中确定入口文件，出口文件，插件信息。配置完成后只需要用命令webpack就可以进行打包
var path=require('path');
module.exports={
entry:__dirname+"/runboot1.js", //入口
output:{ //出口
path:__dirname+"/dist", //出口文件路径 ，默认为./dist
filename:"bundle.js", //出口文件名称
},
module:{
rules:[{
test:/\.css$/, // 正则匹配要识别的css
use:[ // 使用style-loader，css-loader进行处理，style-loader的位置必须在css-loader前面
{loader:'style-loader'},
{loader:'css-loader'}
]
}]
}
}
（2）运行
cmd——>打开文件所在位置 cd D:\webpack-demo\app4 ——>执行webpack打包 webpack
最终效果
image.png
（3）webpack.config.js详解
在app文件夹下创建webpack.config.js文件：
var path=require('path');
module.exports={
entry:__dirname+"/runboot1.js", //入口
output:{ //出口
path:__dirname+"/dist", //出口文件路径 ，默认为./dist
filename:"bundle.js", //出口文件名称
},
module:{
rules:[{
test:/\.css$/, // 正则匹配要识别的css
use:[ // 使用style-loader，css-loader进行处理，style-loader的位置必须在css-loader前面
{loader:'style-loader'},
{loader:'css-loader'}
]
}]
}
}
rules还有几种写法：
//第二种
rules:[{
test:/\.css$/, // 正则匹配要识别的css
loader:"style-loader!css-loader" //webpack1的写法，建议抛弃
}]
//第三种
rules:[{
test:/\.css$/, // 正则匹配要识别的css
use:['style-loader','css-loader']
}]
但是要注意，style-loade的位置必须在css-loader前面
（4）在运行之前先要安装一些模块
- 如果我们需要在应用中添加 css 文件，就需要安装 css-loader 和 style-loader(全局安装需要参数 -g)
cnpm install css-loader style-loader - 如果output使用path: path.resolve(__dirname, 'dist') ， 需要安装模块path
npm install path --save
4.为什么还是没有显示呢？
浏览器报错！？
image.png
bundle.js由于webpack.config.js文件输出文件output存储到了dist文件下，path:__dirname+"/dist" ,所以只要把html文件里bundle.js的路径改一下就可以正常显示啦
<script type="text/javascript" src="dist/bundle.js" charset="utf-8"></script>
image.png
网友评论