webpack --- > 发布环境的配置 && 代码压缩 && 代码分类

最新推荐文章于 2021-06-14 22:08:00 发布

栗子好好吃

最新推荐文章于 2021-06-14 22:08:00 发布

阅读量586

点赞数

分类专栏： webpack 读书笔记配置文章标签： webpack js 项目部署项目配置文件 npm

本文链接：https://blog.csdn.net/piano9425/article/details/103979928

版权

本文介绍了如何配置Webpack的发布环境，包括删除开发配置、新建生产环境配置文件，并详细讲解了从项目初始化到使用Webpack打包的过程。还涵盖了Webpack的优化策略，如代码压缩、分离第三方库、管理图片资源等，以及Webpack中loader和plugin的区别。

摘要由CSDN通过智能技术生成

说明

源代码
本篇主要对发布环境的配置说明
前面2点是对webpack的一个复习.
第3点开始,逐步配置部署代码

1. Webpack发布的策略

2.1 在实际开发中,一般会有两套方案:

开发期间的项目:包含了测试文件、测试数据、开发工具、测试工具等相关配置,有利于项目的开发和测试,但是这些文件仅用于开发,发布项目的时候需要删除
部署期间的项目,剔除了那些客户用不到的测试数据、测试工具和文件,比较纯净,减少了项目发布后的体积,有利于开发和部署

2.2 生产环境的配置文件

为了满足我们的发布策略,需要新建一个配置文件,命名为webpack.publish.config.js,将webpack.config.js的配置拷贝过去,剔除一些开发配置项即可.
将devSever节点删掉:

  devServer: {
   
    hot: true,
    open: true,
    port: 4321
  }

将plugins节点下的热更新插件删掉:

new webpack.HotModuleRupluComuntPlugin()

2. Webpack从0开始使用

2.1 项目初始化

注: 使用的node版本是 12.10.0

2.1.1 新建项目(文件夹)`webpack-senior`

2.1.2 进入`webpack-senior`

新建下面三个:

打包之后的文件夹: dist
项目的源代码: src
webpack的配置文件: webpack.config.js

2.1.3 初始化项目

npm init -y
使用yarn安装 jquery: yarn add jquery (等同于 npm i -D jquery)

2.1.4 src的初始化

在其中新建如下文件和内容:

src/index.js

 <html>
    <body>
      <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
      </ul>
    </body>
 </html>

src/main.js

import $ from 'jquery'
$(function(){
     
  $('li:odd').css('backgroundColor','pink');
  $('li:even').css('backgroundColor','marron');
})();

2.1.5 配置文件的编写

上面完成了简单的页面和js对页面的操作,下面写Webpack的配置文件(webpack使用配置文件对项目进行打包构建)

webpack.config.js

 const path = require('path');

 module.exports = {
     
   entry: path.join(__dirname,

最低0.47元/天解锁文章