webpack是什么?
- webpack 是一个用来构建我们应用程序中的 JavaScript 模块的工具。
如何安装?
# 先初始化一个package.json 一路回车
1. npm init
# 注意!这里不推荐全局安装.这样会锁定webpack的版本为1.14(现在都2.X多啦!)
2. npm install webpack -g
# 或
npm install webpack@2.2.1 --save-dev
创建一个webpack配置文件
- 新建一个文件:
webpack.config.js
- 新建一个html:
index.html
- 新建一个入口文件:
main.js
此时我们的文件夹里应该有
- node_modules
- index.html
- main.js
- package.json
- webpack.config.js
# index.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script src="dist/bundle.js"></script>
</body>
</html>
# main.js
app.innerHTML="我会使用webpack啦"
# webpack.config.js
var path = require('path');
module.exports = {
//这是一个入口文件(你要编译的文件)
entry:'./main',
//编译后输出的路径配置
output:{
//目标文件夹(这个设置是绝对路径,以这个配置文件所在位置计算.因为webpack是根据你命令所在的路径计算的.)
path:path.resolve(__dirname, 'dist'),
//编译后的文件名字
filename:'bundle.js'
},
}
好!现在让我们在当前文件夹下执行webpack命令
Paste_Image.png
- 每个人内容可能不同,但是这样子的就表示执行成功了!
- 也可以看到当前文件夹下多出了个
dist的文件夹,点进去后发现还有个bundles.js的文件.这就是我们编译后的文件啦!
- 接下来让我们打开
index.html看看吧!
Paste_Image.png
- 可以看到main.js里的代码确实执行了
- 自此我们就会打包啦!(当然还有很多内容..)
现在我们会打包js文件了,那css文件呢?
- 要知道webpack只会识别js文件的
- 要想让webpack识别css文件,就得使用到装载器了
loader
先让我们安装下css的装载器
# 在package.json的`devDependencies`对象下手动写入
//顺便加个babel吧!(将ES6代码转为ES5)
"babel-core": "^6.1.2",
"babel-loader": "^6.1.0",
"babel-preset-es2015": "^6.1.2",
"babel-preset-stage-2": "^6.1.2",
"style-loader": "^0.13.2",
"css-loader":"^0.26.4"
# 然后执行
npm install
接下来我们新创建一些文件
- 新建
.babelrc(这是babel的配置文件)
- 新建
style.css
- 在
main.js里引入style.css
此时目录下的文件
- node_modules
- index.html
- main.js
- package.json
- webpack.config.js
- .babelrc
- style.css
- dist
webpack.config.js里的配置需要加点东西
# webpack.config.js
↑接着前面的内容
module:{
rules:[
{
//检测到.css结尾的文件时候
test:/\.css$/,
//使用`css-loader`和`style-loader`
use:['style-loader','css-loader']
},
{
//检测到.js结尾的文件时候
test:/\.js$/,
//使用`babel-loader`
use:['babel-loader']
}
]
}
# .babelrc
//一些相关配置
{
"presets": ["es2015", "stage-2"],
"plugins": ["transform-runtime"]
}
# style.css
app{
color:red;
}
body{
background:#ccc;
}
# main.js
import "./style.css"
app.innerHTML="我会使用webpack啦"
for(let i=0;i<3;i++){
setTimeout(()=>{
console.log(i)
},1000)
}
- 现在让我们执行下
webpack命令
- 打开
index.html
Paste_Image.png
Paste_Image.png
至此,超级简单的webpack使用我们就会拉!