webpack生产模式和开发模式的使用

webpack出产模式和开辟模式的利用

1先在【package.json】文件中添加如下代码：

"scripts": {  

     "dev":"webpack --mode development",  

     "build":"webpack --mode production"  

  }, 

2、出产模式：npm run build；

3、开辟模式：npm run dev；

4、webpack输出的文件在【dist】文件夹下；

工具/原料

• node.js
• cmd
• webpack

webpack出产模式和开辟模式的利用

1. 1

   webpack安装完当作后，进行相关的号令操作时，会有一个警告WARNING in 

   configuration……，如图所示：

   意思是：webpack没有指定是开辟模式development仍是出产模式production；

   关于webpack的安装请拜见：

   16webpack怎么安装

   
2. 2

   打开【package.json】文件，在该文件中插手代码：

   "scripts": {  

        "dev":"webpack --mode development",  

        "build":"webpack --mode production"  

     }, 

   如图所示：

   
3. 3

   然后经由过程cmd进入项目根目次【mode】，输入号令【npm run dev】，按回车键；

   获得如下信息，不再呈现警告信息，如图：

   4cmd号令提醒符如何打开E盘下的文件夹

   
4. 4

   打开项目文件【mode】，可以看到【mode】文件夹下主动生当作了一个文件夹【dist】，如图：

   
5. 5

   打开【dist】文件夹，webpack输出的文件【main.js】就在【dist】中，如图：

   
6. 6

   用sublime打开【mian.js】文件，该js文件内容格局如图所示：

   
7. 7

   再经由过程cmd，输入号令【npm run build】，然后按回车键，如图：

   
8. 8

   然后在打开【dist】文件夹下的【main.js】文件，这时的【main.js】是webpack出产模式输出的文件，该js文件内容格局如图所示：

   

注重事项

• 但愿小编分享的原创经验对好伙伴们有所帮忙，若是小伙伴们有对本经验有任何疑问， 请鄙人方评论处 留言会商，小编第一时候来解答！