webpack简单入门
程序员文章站
2022-03-06 13:57:15
...
新建目录
`webpack-demo
|`app
| |index.js
|`dist
| |bundle.js
|`node_modules
`index.html
`package.json
创建package.json 文件
npm init -y
安装webpack模块
npm install webpack --save-dev
新建文件夹以及文件
app/index.js
````
funciton component (){
var e = document.createElement('div');
e.innerHTML = _.join(['Hello','webpack'],'');
return e;
}
document.body.appendChild(component);
````
dist/bundle.js
index.html
````
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 线上引入lodash.min.js -->
<script src="https://cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script>
</head>
<body>
<!-- 引入自己的js -->
<script src="app/index.js"></script>
<!-- 这时候可以在浏览器查看到输出Hello webpack -->
</body>
</html>
````
本地安装lodash模块
npm install lodash --save
修改文件
app/index.js
````
// 引入lodash文件，ec6语法，需要进行编译后才能使用。
// ++
import _ from 'lodash';
funciton component (){
var e = document.createElement('div');
e.innerHTML = _.join(['Hello','webpack'],'');
return e;
}
document.body.appendChild(component());
````
index.html
````
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- -- -->
<!-- 线上引入lodash.min.js -->
<!-- 注释掉线上的，引入本地打包好的bundle.js文件 -->
<!-- <script src="https://cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script> -->
<!-- -- -->
</head>
<body>
<!-- -- -->
<!-- 引入自己的js -->
<!-- <script src="app/index.js"></script> -->
<!-- 这时候可以在浏览器查看到输出Hello webpack -->
<!-- -- -->
<!-- ++ -->
<script src="dist/bundle.js"></script>
<!-- ++ -->
</body>
</html>
````
第一种打包方式：命令行打包
全局安装webpack可以直接使用webpack命令打包文件
webpack app/index.js dist/bundle.js
新建webpack.config.js
var path = require('path');
module.exports={
entry:'app/index.js',
output:{
filename:'dist/bundle.js',
path:path.resolve(__dirname, 'dist')
}
}
第二种打包方式：根据配置文件打包
webpack
第三种打包方式：让npm帮你打包
在package.json里面加入
{
...
"script":{
'build':'webpack --display-error-details -watch'
}
...
}
执行打包命令
npm run build
开启报错
webpack --display-error-details
js压缩混淆
webpack -p
监听代码变动自动打包
webpack -watch