依赖安装：
全局安装
指令：npm install -g webpack
安装地址：系统文件/usr/local
本地安装
指令：npm install -D webpack
安装地址：工程文件下的./node_module
版本依赖：
学习过程中遇到一些异常，经过排查一定成都上是因为webpack，webpack-cli，webpack-dev-server版本之间的兼容性，经过多次试错，以下版本的兼容性较好，可以作为参考
"webpack": "^4.43.0",
"webpack-dev-server": "^3.1.14",
"webpack-cli": "^3.3.12"
步骤：
- 1.新建文件夹
--webpckCourse
----config
------webpack.dev.js
--dist
----index.html
--src
----main.js
- 2.执行指令，初始化配置文件
npm init生成package.json,git init生成git配置文件 - 3.npm安装依赖，如
npm install -D webpack@^4.43.0 webpack-dev-server@3.1.14 webpack-cl@^3.3.12，安装成功后会在package.json中的dependencies记录
使用webpack打包：
步骤：
- 1.编辑文件
///dist/index.html
<body>
<h1>hello world</h1>
<script src="main-bundle.js"></script>
</body>
///src/main.js
alert('xxx1111111')
- 2.编辑webpack配置文件
const path = require("path")
module.exports = {
entry: {
//入口，有并且可以有多个
main:["./src/main.js"]
},
//开发环境
mode:"development",
//出口，有且仅有一个
output: {
//[name]-bundle.js打包后生成main-bundle.js文件
filename: "[name]-bundle.js",
path: path.resolve(__dirname, '../dist'),
//公共路径
publicPath: "/"
},
devServer: {
contentBase:'dist'
}
}
- 3.本地启动服务
按上述配置，执行命令启动本地服务webpack-dev-server --config=config/webpack.dev.js
jc@jc:~/Desktop/技术栈/Webpack/webpackCourse$ webpack-dev-server --config=config/webpack.dev.js
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from dist
ℹ ｢wdm｣: Hash: 2f7d854d57780602914c
Version: webpack 4.44.2
Time: 343ms
Built at: 12/10/2020 10:53:05 AM
Asset Size Chunks Chunk Names
main-bundle.js 363 KiB main [emitted] main
Entrypoint main = main-bundle.js
[1] multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.js 40 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/ansi-regex/index.js] 135 bytes {main} [built]
[./node_modules/html-entities/lib/index.js] 449 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 8.65 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/main.js] 19 bytes {main} [built]
+ 19 hidden modules
ℹ ｢wdm｣: Compiled successfully.
访问localhost:8080即可
webpack的配置文件
参考：https://github.com/pingan8787/Leo-JavaScript/blob/master/Cute-Webpack/guide/README.md
网友评论