Webpack的简单使用

Webpack的简单使用

1. 下载依赖

   • 初始化 package.json

     npm init -y
     

   • 下载依赖

     npm i webpack webpack-cli -D
     

2. 启用Webpack

   • 开发模式——(文件是项目入口主文件

     [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WZYZRz6j-1658295682543)(C:\Users\不喝冰啤酒\AppData\Roaming\Typora\typora-user-images\image-20220529203552366.png)]

     npx webpack ./src/main.js --mode=development
     

   • 生产模式——(文件是项目入口主文件)

     [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QQ4GSJHD-1658295682544)(C:\Users\不喝冰啤酒\AppData\Roaming\Typora\typora-user-images\image-20220529203626007.png)]

      npx webpack ./src/main.js --mode=production
     

3. 观察输出文件

• 默认 Webpack 会将文件打包输出到 dist 目录下，我们查看 dist 目录文件下文件情况就好了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fDrntYRr-1658295682545)(C:\Users\不喝冰啤酒\AppData\Roaming\Typora\typora-user-images\image-20220529203153814.png)]

4. Webpack的基本配置

• 再项目根目录创建一个webpack.config.js文件

  const path = require("path")    //nodejs核心模块，处理路径问题
  
  module.exports = {
      //入口
      entry: './src/main.js',  //相对路径
      //输出
      output: {
          //文件的输出路径
          //__dirname表示当前文件的文件夹目录
          path: path.resolve(__dirname,'dist'),   //绝对路径
          //文件名
          filename: 'main.js'
      },
      //加载器
      module: {
          rules: [
          //loader的配置
          ],
      },
      //插件
      plugins: [
          //plugin的配置
      ],
      //模式
      mode: 'development',
  };
  

  • 配置好这个文件之后可以使用以下代码对项目进行打包

    npx webpack
    

5. 开发模式

• 开发模式顾名思义就是我们开发代码时使用的模式。

  这个模式下我们主要做两件事：

  1. 编译代码，使浏览器能识别运行
     开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源
  2. 代码质量检查，树立代码规范
     提前检查代码的一些隐患，让代码运行时能更加健壮。
     提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。

代码质量检查，树立代码规范
提前检查代码的一些隐患，让代码运行时能更加健壮。
提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。