webpack入门创建一个简单的项目

忘是亡心i 2023-07-11 06:12 8阅读 0赞

#### 开始前需要安装好 node npm(cnpm) ####

1.  **首先创建一个目录 one-webpack 并进入目录**
2.  **初始化项目，命令如下**

npm init

1.  **回车后会有一系列创建项目的提示，可以一路回车，后期可以修改，最后会创建一个package.json文件**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg_size_16_color_FFFFFF_t_70]
2.  **安装依赖如果网络慢的可以用cnpm安装**

npm install webpack --save-dev
    npm install webpack-cli --save-dev

> **为什么安装webpack后还要安装webpack-cli呢？**  
> 因为在webpack 3中，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，他们已经将两者分开来更好地管理它们。

1.  **创建webpack.config.js文件来配置webpack打包基本信息**

// webpack.config.js
    let path = require('path')
    
    module.exports = { 
      entry: './index.js',  //输入文件
      output: { 
    		path: path.join(__dirname, 'dist'),
    		publicPath: '/dist/',  //输出路径
    		filename: 'bundle.js' 输出文件
    	}
    }

1.  **创建index.js文件作为输入文件**

//index.js
    document.write('Hello webpack')

1.  **创建index.html文件**

<!DOCTYPE html>
    <html lang="zh">
    <head>
    	<meta charset="UTF-8">
    	<title></title>
    </head>
    <body>
    	<script src="dist/bundle.js"></script>
    </body>
    </html>

1.  **安装本地运行环境 webpack-dev-server**

npm install webpack-dev-server --save-dev

1.  **修改package.js的script配置本地运行**

> **关于webpack-dev-server的属性说明**
> 
>  *  **–open** 自动打开浏览器
>  *  **–host** 代表运行的域名可以输入127.0.0.1、locallost、本机ip，如果不配置默认是localhost，也可以通过127.0.0.1访问，但是不能通过本机ip访问。
>  *  **–port** 8888代表运行的端口号是8888，如果不配置则默认是8080。

"scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1",
    	"start": "webpack-dev-server --open --host localhost --port 8888 --config webpack.config.js"
      },

1.  **启动项目**

npm run start

1.  \*\*最后会自动打开浏览器运行 \*\*  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200304153840118.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200304163304875.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg==,size_16,color_FFFFFF,t_70