webpack学习笔记-1
2021-03-25 本文已影响0人
miao8862
安装
建议局部：cd webpack demo
npm init
npm i -D webpack webpack-cli
npx webpack -v
webpack是基于Nodejs构建的, nodejs是使用commonjs模块化标准
webpack开始小demo
// addContent.js
export default function() {
document.write("add content");
}
// index.js
import addContent from './addContent'
document.write("hello webpack")
addContent();
// index.html
<body>
<script src="./dist/bundle.js"></script>
</body>
执行：wepack-demo miao$ npx webpack --entry=./index.js --output-filename=bundle.js --mode=development
会在./dist下生成bundle.js
- 可以使用npm提供的脚本运行：
npm run build
// package.json
"scripts": {
"build": "webpack --entry=./index.js --output-filename=bundle.js --mode=development"
}
- 使用webpack默认配置文件webpack.config.js
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js"
},
mode: "development"
}
// package.json
"scripts": {
"build": "webpack"
}
webpack-dev-server
发现每次修改后，要重新打包才能看到效果，在开发时很不方便，可以使用webpack-dev-server解决:
- 令webpack进行模块打包，并处理打包结果的资源请求
- 作为web Server,处理静态资源文件
- 能够有live-reloading自动刷新的特性，修改后不需要重新打包就能看到结果
执行这个并不会生成dist目录，而是将打包结果保存到内存中，webpack-dev-server接收到请求时，只是将内存中的打包结果返回给浏览器
npm i -D webpack-dev-server
// package.json
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server"
},
// webpack.config.js
module.exports = {
entry: __dirname + "/src/index.js",
output: {
filename: "bundle.js"
},
mode: "development",
devServer: {
publicPath: "/dist"
}
}
