什么？你咋还不会搭webpack？

前言：

此文档演示一套webpack项目的完整搭建以及常见配置，保持更新
安装命令默认为cnpm i *——可以根据喜好改成npm或者yarn
后缀为 -D: --save-dev 也就是说当前依赖要安装到开发环境中去 devDependenc
后缀为 -S: --save 也就是说当前依赖要安装到生产环境中去 Dependencies

一：初始化

• 创建项目文件夹：我想你应该会
• 初始化项目：npm init -y

二：安装webpack以及webpack-cli

• 安装命令：cnpm i webpack webpack-cli -D

三：创建配置环境文件

• 根目录创建config文件夹

• config文件夹里分别创建：

  1. base.config.js

     公用配置

  2. dev.config.js

     开发环境配置

  3. pro.config.js

     生产环境配置

四：创建开发目录

• 在根目录创建src目录

  src文件夹中必须有一个入口文件，通常是main.js

• 在根目录创建public目录

  项目的静态资源文件

五：webpack基本配置项（base.config.js)

• entry

  入口文件配置

      // 配置入口文件和出口文件地址
      const PATH = {
          app: path.join(__dirname, "../src/main.js"),
          build: path.join(__dirname, "../dist")
      }    
      
      // 入口文件配置
      entry: {
          app: PATH.app
      },
  

• output

  出口文件配置

      output: {
          path: PATH.build,
          filename: "[name].js"
      },
  

• resolve

  文件引入优先级与别名的配置

   resolve: {
       //文件引入的优先级
       extensions: [".vue",".js", "scss", "art", "css", "json"],
       //别名的配置
       alias: {
           "@": path.join(__dirname, "../src"),
           // ...
       }
   },
  

• plugins

  插件配置：webpack中凡是用插件的地方都必须要在plugins中进行使用

  plugins是个数组

      plugins: [
          new Xxx(),
          // ...
      ],
  

• module

  凡是需要将浏览器不识别的文件转换为浏览器识别的文件的配置项都需要在module中进行配置，比如各种loader都在这里

      module: {
          rules: [
              {
                  // ...
              },
              // ...
          ]
      }
  

六：安装常用的plugins插件

cnpm i html-webpack-plugin clean-webpack-plugin copy-webpack-plugin extract-text-webpack-plugin@next -D

• html-webpack-plugin

  自动

  公用配置

  new HtmlWebpackPlugin({
      template:"./public/index.html",
      filename:"index.html"
  })
  

• clean-webpack-plugin

  自动删除旧的html文件

  公用配置，解构赋值引入

  new CleanWebpackPlugin()
  

• copy-webpack-plugin

  拷贝静态资源

  公用配置

  new CopyWebpackPlugin([
      {
          context:path.join(__dirname,"../public"),
          from:"**/*",
          to:path.join(__dirname,"../dist"),
          ignore:["index.html"]
      }
  ])
  

• extract-text-webpack-plugin

  抽离css文件

  生产环境配置

七：安装常用的loader

1. 处理JS的loader

   cnpm i babel-loader @babel/core @babel/preset-env -D

   • babel-loader
   • @babel/core
   • @babel/preset-env

   注意：一定要在根目录创建文件名为.babelrc的文件，并写入以下配置项（删掉注释）：

   {
       "presets": [
           [
               // 低版本的转换
               "@babel/preset-env",
               {
                   //设置浏览器版本
                   "targets":{
                       //兼容到所有浏览的最后2个版本
                       "browsers":["last 2 version"]
                   }
               }
           ]
       ]
   }
   

2. 处理图片的loader

   cnpm i url-loader file-loader -D

   • url-loader

     一般用来解析一些体积比较小的图片，可以通过options中的limit来设置图片的大小，如果图片大于limit的大小了则会用file-loader进行解析

   • file-loader

     一般用来解析比较大的图片

3. 处理css的loader

   处理css的loader，开发配置和生产配置要分离

   cnpm i style-loader css-loader sass-loader node-sass postcss-loader autoprefixer -D

   • style-loader

   • css-loader

   • sass-loader

     用来解析sass文件

   • node-sass

     用来解析sass文件，没它不行

   • postcss-loader

   • autoprefixer

4. 处理vue单文件组件

   cnpm i vue-loader vue-template-compiler -D

   • vue-loader

     1. 允许Vue组件的每个部分使用其他的webpack loader。例如在<style>部分使用sass，在<template>`部分使用Pug。
     2. 允许在一个.vue文件中使用自定义块，并对其运用自定义的loader链。
     3. 使用webpack loader将<style>和template中引用的资源当做模块依赖来处理。
     4. 为每个组件模拟出 scoped CSS。
     5. 在开发过程中使用热重载来保持状态。

   • vue-template-compiler

   {
       test:/\.vue$/,
       loader:"vue-loader"
   }
   

八：合并webpack配置项

• webpack-merge：cnpm install webpack-merge -D

  开发环境和生产环境的配置直接从各自的module开始

九：webpack服务

• webpack-dev-server：cnpm install webpack-dev-server -D

  devServer:{
      port:9000
  }
  

十：处理非模块化插件（zepto）

cnpm install script-loader exports-loader -D

• script-loader

• exports-loader

  在module中配置：

      {
          //引入非模块化的插件
          test: require.resolve('zepto'),
          //转化成模块的方式
          loader: 'exports-loader?window.Zepto!script-loader'
      },