webpackjs 打包器、安装、打包...

最新推荐文章于 2024-10-08 22:47:55 发布

AugustDY

最新推荐文章于 2024-10-08 22:47:55 发布

阅读量205

点赞数

分类专栏： php

本文链接：https://blog.youkuaiyun.com/AugustDY/article/details/89923184

版权

php 专栏收录该内容

24 篇文章

订阅专栏

set1：安装
1.全局安装webpack：npm install webpack -g(简写：npm i webpack -g)
2.全局安装webpack-cli：npm install webpack-cli -g

set2：使用
1.生成node_modules：npm install webpack --save-dev（简写：npm i webpack -D）
2.执行npm init （默认项目配置请使用：npm init -y）
3.package.json配置
在package.json文件 "scripts" 中增加 "build" : "webpack --progress --colors"

4.官网例子https://www.webpackjs.com/

demo-01
   node_modules
   package-lock.json
   package.json
   src
       index.js
       bar.js
   page.html
   webpack.config.js

文件：src/index.js
代码：
import bar from './bar';
bar();

文件：src/index.js
代码：

文件：src/bar.js
代码：
   export default function bar() {
   //
   }

文件：webpack.config.js
代码：
const path = require('path');

   module.exports = {
   entry: './src/index.js',
   output: {
   path: path.resolve(__dirname, 'dist'),
   filename: 'bundle.js'
   }
   };

文件：page.html
代码：
   <!doctype html>
       <html>
           <head>
               ...
           </head>
       <body>
           ...
       <script src="dist/bundle.js"></script>
       </body>
   </html>