webpack打包工具

￡神魔★判官ぃ 2021-09-16 17:34 628阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70][]

或者cnpm install  webpack -g  淘宝镜像

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 1][]

mkdir  创建文件夹

cd 进入文件夹

ls查看文件里的内容

vs打开你创建的文件  里面引入 html   js文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 2][]

生成bundel.js

单个打包

如果报错

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 3][]

可以应该另一种方式

第一种常见解决方案: 因为在老版本中Webpack打包命令是

webpack .\\src\\main.js .\\dist\\bundle.js  
1  
而在webpack4之后 官方对 webpack-cli 单独抽离了出来 所以我们需要   
1. 安装webpack

npm i webpack -g  
1  
2. 安装 cli

npm i -g webpack-cli  
1  
3. 打包 将 a.js b.js 替换了就可以

npx webpack a.js --output-filename b.js --output-path . --mode development

多个打包   输出与主装的依赖

通过module.exports接收    require输出

文本样式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 4][]

json样式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 6][]

如果传值为函数时

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 8][]

初始化package.json文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 9][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 10][]

初始化完成

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 11][]

然后下载 style-loader css-loader

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 12][]

写入css样式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 13][]

生成packge.json文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 14][]

加入require('!style-loader!css-loader!./style.css')

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 15][]

引入完成

新建以下文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 16][]

还要修改内部的路径  生成一个webpack.config.js文件

module.exports=config;

var config=\{

entry:'./src/js/show.js',

output:\{

path: \_\_dirname+"/dist",

filename:'bundle.js'

\},

module:\{

rules:\[

test:/\\.css$/,

loader:'style-loader!css-loader'

\};

module.exports = config;

注意一点rules 不能写成loaders 还要就是路径问题

如何引入第三方包文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 17][]

引入之后  package.json文件中就会有显示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 18][]

script启动项

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 19][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 20][]

script下的文件是可以修改的

修改成"build":"webpack"

这样修改以后我们在npm中就可以不再输出webpack 可以直接写npm run build

安装到服务端要下载

npm中输入代码

npm install webpack-dev-server  --sav-dev

然后在

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 21][]

"start": "webpack-dev-server --entry ./src/js/show.js --output-filename ./dist/bundle.js",

最好在npm中 输入![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 22][]

然后端口号就出来了 默认端口8080

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 23][]加入watch双监

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 24][]

修改端口号

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70]: /images/20210813/21bca5f1030d49f696313f67d94f30d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 1]: /images/20210813/94c5d5791417489ca5a50110ec4104a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 2]: /images/20210813/03e13384b7154059a8795fb44bdaba1b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 3]: /images/20210813/60a7ba8b6763480dbaad5425c27a1b76.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 4]: /images/20210813/f6dee2c32da84f9cb14a677b24594344.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 5]: /images/20210813/9f62e47a67dc49878ff2e913fa72b078.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 6]: /images/20210813/f2ea5a2ed0eb40668317b7967c5f612d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 7]: /images/20210813/d07458127da049c0b8a78cb2581900b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 8]: /images/20210813/e1a72d5e81d541ed89825592297eed3e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 9]: /images/20210813/645043094b004dd7b1bf7a9377e1d907.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 10]: /images/20210813/0801652ac19b431fae4a5b4cd4f8a8b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 11]: /images/20210813/f18e97de2d5542688e2be01b92aa339a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 12]: /images/20210813/98f11d1aa34b42a7a5d5424caa413bbc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 13]: /images/20210813/4f23d7f21ce74c37999cdd0bdea14e94.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 14]: /images/20210813/b829e2c246084d1f8bec58d391fa0173.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 15]: /images/20210813/b1b9dd8c5d9246b9801ec13a775b781b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 16]: /images/20210813/15f1de702d254f908d08c75d618c5b15.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 17]: /images/20210813/2396e7a68f2d433ba0ce89fdfddf6dfb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 18]: /images/20210813/352c0cd028214aa98436fd671e40e97f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 19]: /images/20210813/6c27d9708aa242eb9f2df2912c9f95d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 20]: /images/20210813/d9ac90156b644ae6a43e4b7df5ea5666.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 21]: /images/20210813/6b0dc1186b754c74aabc04da536d8fdb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 22]: /images/20210813/39268e66d09c4235b3368f69ffff701e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 23]: /images/20210813/62e54510d7164c938734599614f3f57a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_27_color_FFFFFF_t_70 24]: /images/20210813/cf483f0a7c1b4570ac9e5b80a397b7b9.png