webpack简单使用(1)

港控/mmm° 2022-03-16 11:04 223阅读 0赞

今天想了解一下webpack，但找了网上的一系列教程，都会或多或少出现一些不明报错，实在恼火，经过几番简化，终于用最简单的方法使用了webpack，在此记录一下

### 一.环境配置 ###

**1.**首先，安装Node.js，这里不赘述，未接触nmp的童鞋可以参考[Node.js安装配置][Node.js]

**2.**在cmd中输入

npm install webpack -g

**3.**在自己测试的位置创建一个新的文件夹，命名webpack\_demo

![20190227170217609.png][]

**4.**进入刚刚所创建的文件夹webpack\_demo，按住shift键同时点击鼠标右键(即打开cmd并进入webpack\_demo文件夹)

![20190227170556117.png][]

**5.**在打开的命令窗口键入：npm init，根据提示填写信息，name表示项目名，version表示版本等等，不一一赘述了，也可使用默认值，一路回车即可，最后出现“is this ok?”时，敲击回车键，webpack\_demo文件夹便生成了package.json文件夹

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xneDExMzQ1NjkyODU_size_16_color_FFFFFF_t_70][]

### 二.构建webpack项目 ###

1.在webpack\_demo文件夹下创建webpack.config.js文件，此文件为webpack的配置文件。具体内容如下：

//webpack.config.js
    module.exports={
    	entry:'./src/js/entry.js', //页面入口文件
    	//输出文件
    	output:{
    		filename:'index.js',	//输出文件名
    		path:__dirname+'/out',	//输出文件路径
    	}
    }

参数简单说明：

*  entry： 是 页面入口文件配置 （html文件引入唯一的js 文件）
 *  output：对应输出项配置 
    
     *  path ：入口文件最终要输出到哪里，
     *  filename：输出文件的名称
     *  publicPath：公共资源路径

**2.**接着，我们在创建一些基本的文件保存路径，我们这里创建网页中最基本的一些文件夹

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xneDExMzQ1NjkyODU_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xneDExMzQ1NjkyODU_size_16_color_FFFFFF_t_70 2][]

**3.**接下来我们在index.html，和entry.js中填充点内容

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
    	<title></title>
    </head>
    <body>
    <div>hello world</div>
    <script type="text/javascript" src="./out/index.js"></script>
    </body>
    </html>

// entry.js
    document.write('呵呵到天亮');

**4.**完成以上操作，我们可以来试试效果了，在刚才所打开的cmd窗口中输入webpack （假如已经关闭，按上面第4步操作即可）

下面WARNING in configuration原因及解决办法可点击链接：[https://blog.csdn.net/lgx1134569285/article/details/87986317][https_blog.csdn.net_lgx1134569285_article_details_87986317]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xneDExMzQ1NjkyODU_size_16_color_FFFFFF_t_70 3][]

**5.**看到上面 的一幕，恭喜你，已经成功了，我们再进一步验证一下，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xneDExMzQ1NjkyODU_size_16_color_FFFFFF_t_70 4][]

目录下多了一个out文件夹，out文件生成了我们所命名的index.js

![20190227175645773.png][]

打开内容如下

![20190227190827916.png][]

打开index.html文件，结果不仅打印出html文件中的"hello world"，js中的打印123也生效了

(ps：这里打印中文时假如出现乱码，记得在html文件的<head>标签添加编码<meta charset="utf-8">)

![201902271908466.png][]

[Node.js]: http://www.runoob.com/nodejs/nodejs-install-setup.html
[20190227170217609.png]: /images/20220316/ecc0c063efa448e8a43b8f44d76ae9f4.png
[20190227170556117.png]: /images/20220316/4a29711b5c3641e5b7699e68375d9ad4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xneDExMzQ1NjkyODU_size_16_color_FFFFFF_t_70]: /images/20220316/5c9ab633a75b430c8059d583ebdc5f00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xneDExMzQ1NjkyODU_size_16_color_FFFFFF_t_70 1]: /images/20220316/a83e36eb19cb4d3585951ec2be4c6ee5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xneDExMzQ1NjkyODU_size_16_color_FFFFFF_t_70 2]: /images/20220316/3f1698cd49e74b02b57def2b70a81dcd.png
[https_blog.csdn.net_lgx1134569285_article_details_87986317]: https://blog.csdn.net/lgx1134569285/article/details/87986317
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xneDExMzQ1NjkyODU_size_16_color_FFFFFF_t_70 3]: /images/20220316/4e04c0ca99144cd480f02632c60fd876.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xneDExMzQ1NjkyODU_size_16_color_FFFFFF_t_70 4]: /images/20220316/a57f2c27e7144f2e94f827fa32264341.png
[20190227175645773.png]: /images/20220316/cce8a903c2c64960bca64274d378062e.png
[20190227190827916.png]: /images/20220316/4d109c7bd91b46daaf5ee80e208afad9.png
[201902271908466.png]: /images/20220316/e9bfc128dd304994a577b148cb8d5a8e.png