webpack的正确打开方式

一.了解webpack基本配置

1.1初始化webpack项目

新建一个目录然后初始化

npm init

安装依赖包

npm i -D webpack webpack-cli

新建文件夹src，写一个入口文件main.js 然后测试一下 在package.json里配置命令

"build":"webpack src/main.js"

执行

npm run build

如果生成一个dist文件夹则证明打包成功

1.2增加配置

为了使得每次生成的js不一样我们需做如下配置

module.exports = {
    // 省略其他配置
    output: {
      filename: '[name].[hash:8].js',      // 打包后的动态文件名称
      path: path.resolve(__dirname,'../dist')  // 打包后的目录
    }
}

那么如何让打包后的js加载到html中呢？如果是单入口文件可以做如下配置

首先:

npm i -D html-webpack-plugin

然后:新建一个build同级的文件夹public,里面新建一个index.html

具体配置文件:

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode:'development', // 开发模式
    entry: path.resolve(__dirname,'../src/main.js'),    // 入口文件
    output: {
      filename: '[name].[hash:8].js',      // 打包后的文件名称
      path: path.resolve(__dirname,'../dist')  // 打包后的目录
    },
    plugins:[
      new HtmlWebpackPlugin({
        template:path.resolve(__dirname,'../public/index.html')
      })
    ]
}

那么接下来让我们讨论如果是多入口如何做配置呢？

1.3多入口文件配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode:'development', // 开发模式
    entry: {
      main:path.resolve(__dirname,'../src/main.js'),
      header:path.resolve(__dirname,'../src/header.js')
  }, 
    output: {
      filename: '[name].[hash:8].js',      // 打包后的文件名称
      path: path.resolve(__dirname,'../dist')  // 打包后的目录
    },
    plugins:[
      new HtmlWebpackPlugin({
        template:path.resolve(__dirname,'../public/index.html'),
        filename:'index.html',
        chunks:['main'] // 与入口文件对应的模块名
      }),
      new HtmlWebpackPlugin({
        template:path.resolve(__dirname,'../public/header.html'),
        filename:'header.html',
        chunks:['header'] // 与入口文件对应的模块名
      }),
    ]
}

这时候执行build后会生成不同的html以及对应的js，赶紧去试试吧。

1.4清除上次打包生成的文件

基于上步操作你会发现你的dist文件夹每次打包都会重新生成文件，那么久而久之你的dist目录会出现很多没有用的垃圾文件，所以我们引入clean-webpack-plugin这个plugin

配置如下

const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
    // ...省略其他配置
    plugins:[new CleanWebpackPlugin()]
}

1.5处理css

首先如何引用css呢，首先我们需要在入口js中引入我们的css

import './assets/index.css'

然后引入插件

npm i -D style-loader css-loader
npm i -D less less-loader

在webpack.config.js中配置

module.exports = {
    module:{
      rules:[
        {
          test:/\.css$/,
          use:['style-loader','css-loader'] // 从右向左解析原则
        },
        {
          test:/\.less$/,
          use:['style-loader','css-loader','less-loader'] // 从右向左解析原则
        }
      ]
    }
}

这时打包后我们就可以看到加载的css效果了

1.5.1 添加浏览器前缀

npm i -D postcss-loader autoprefixer  

配置如下

// webpack.config.js
module.exports = {
    module:{
        rules:[
            {
                test:/\.less$/,
                use:['style-loader','css-loader','postcss-loader','less-loader'] // 从右向左解析原则
           }
        ]
    }
} 

接下来引入autoprefixer使其生效，引入方式分两种，具体引入方式依据node.js版本

方式一 根目录下创建一个postcss.config.js文件

module.exports = {
    plugins: [require('autoprefixer')]  // 引用该插件即可了
}

方式二 直接在webpack.config.js里配置

// webpack.config.js
module.exports = {
    module:{
        rules:[{
            test:/\.less$/,
            use:['style-loader','css-loader',{
                loader:'postcss-loader',
                options:{
                    plugins:[require('autoprefixer')]
                }
            },'less-loader']
        }]
    }
}

1.5.2 拆分css

npm i -D mini-css-extract-plugin

配置

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
           MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader'
        ],
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
        filename: "[name].[hash].css",
        chunkFilename: "[id].css",
    })
  ]
}

1.5.3 拆分多个css

npm i -D extract-text-webpack-plugin@next

配置

const path = require('path');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
let indexLess = new ExtractTextWebpackPlugin('index.less');
let indexCss = new ExtractTextWebpackPlugin('index.css');
module.exports = {
    module:{
      rules:[
        {
          test:/\.css$/,
          use: indexCss.extract({
            use: ['css-loader']
          })
        },
        {
          test:/\.less$/,
          use: indexLess.extract({
            use: ['css-loader','less-loader']
          })
        }
      ]
    },
    plugins:[
      indexLess,
      indexCss
    ]
}

1.6 转义js文件

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

配置

// webpack.config.js
module.exports = {
    // 省略其它配置 ...
    module:{
        rules:[
          {
            test:/\.js$/,
            use:{
              loader:'babel-loader',
              options:{
                presets:['@babel/preset-env']
              }
            },
            exclude:/node_modules/
          },
       ]
    }
}

上述插件不能转换新的api所以得加上如下的配置

npm i @babel/polyfill

配置

// webpack.config.js
const path = require('path')
module.exports = {
    entry: ["@babel/polyfill",path.resolve(__dirname,'../src/index.js')],    // 入口文件
}

1.7 其他插件介绍

在工作中我们大多数的时候都是多人开发，那么代码的规范性就显的尤为重要，我们可以使用使用 prettier 格式化代码

1.7.1 prettier

使用步骤如下

yarn add prettier --dev --exact

在工程的根目录下，创建 .prettierrc.js 文件。

module.exports = {
  printWidth: 120, // 每行代码最大长度 默认为80
  tabWidth: 2, //一个tab代表几个空格数
  useTabs: false, //是否使用tab进行缩进
  semi: false, // 声明后带分号
  singleQuote: true, // 使用单引号
  trailingComma: 'none',
  endOfLine: 'auto'
}

添加脚本命令

{
  "script": {
    "prettier": "prettier --write ./src/**.{js,css}"
  }
}

1.7.2 使用 ESLint 审查 JS 代码

使用步骤如下

1.安装 ESLint

yarn add eslint -D

2.生成 .eslintrc 文件 创建 .eslintrc.js 文件有两种方法：

创建 .eslintrc.js 文件 执行脚本命令自动生成

方法一：创建 .eslintrc.js 配置文件 安装依赖

yarn add eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node -D

在工程的根目录下创建 .eslintrc.js 文件

module.exports = {
  env: {
    browser: true,
    es2020: true
  },
  extends: ['standard'],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module'
  },
  rules: {}
}

方法二：运行脚本 安装完 eslint 后，运行 npx eslint --init 可以自动生成 .eslintrc 配置文件。

3.添加 eslint-plugin-prettier 与 eslint-config-prettier 插件 为了让 prettier 能够更好的配合 eslint 检查代码，我们安装以下插件：

eslint-config-prettier： Prettier 与 Linter 工具配合的时候，插件间的配置会彼此冲突。为了解决这个问题，我们使用 eslint-config-prettier 插件，关闭部分 ESLint配置，让 Prettier 的配置覆盖 ESLint 的配置。

eslint-plugin-prettier：ESLint 会使用 prettier 的规则，对工程进行检查。

运行以下的命令，安装 plugin 与 配置

yarn add eslint-plugin-prettier eslint-config-prettier eslint-config-recommended -D

4.调整 .eslintrc.js 文件 我们可以使用 prettier 提供的配置 plugin:prettier/recommended，它会做三件事：

开启 eslint-plugin-prettier

设置 prettier/prettier rule 为 "error" 继承 eslint-config-prettier 的配置

因此，我们在工程中继承 ESLint(eslint:recommended) 与 Prettier(plugin:prettier/recommended) 的配置，即在 extends 列表中，添加 'eslint:recommended' 和 'plugin:prettier/recommended'。 .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2020: true
  },
  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module'
  }
}

1.7.3 其他插件

1.添加 eslint-loader：开发和打包过程中自动审查 js 代码。

2.添加 postcss-loader：允许我们在工程中使用新一代的 css 语法。

3.添加 stylelint：以命令行的形式审查工程中的 css 语法。

4.添加 Pre-commit Hook：提交代码前，强制进行代码检查。

5.添加 commitizen：规范Git日志信息的格式。

6.添加 commitlint：提交代码前，强制审查Git提交的日志格式。

7.添加 standard-version：自动生成 CHANGELOG.md。建立起工单与日志之间的关系。