webpack学习（一）

2020-12-10 本文已影响0人龙猫六六

依赖安装：

全局安装

指令：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