Webpack入门

标签：无分类：杂文创建时间：2020-08-12 02:15:45 更新时间：2024-11-15 10:49:44

很多东西我学过了，做过了，其实总是会忘记，于是就是不停的重复的查询相关的资料，然后再次的学习一遍，觉得好笨啊。

1.npm init

使用npm init初始化项目。

2.安装webpack

## 全局安装
npm install webpack webpack-cli -g 
## 本地安装
npm install webpack webpack-cli -D

3.编写配置文件

在项目根目录下，或者某个目录下创建一个webpack.config.js文件

const {resolve} = require('path'); //node内置核心模块，用来设置路径。
module.exports = {
  entry: './src/js/app.js',   // 入口文件，对应于你自己的主文件
  output: {                     // 输出配置
    filename: './js/bundle.js',      // 输出文件名
    path: resolve(__dirname, '../dist')   //输出文件路径配置,注意这里是两个点，相对于当前路径的上级路径，因为我自己的webpack.config.js是在根路径的config目录下的
  },
  mode: 'production'   //生产环境，还可以配置开发环境development
};

4.编写相关js文件

假如你的入口文件是’./src/js/app.js’,那就在’./src/js/‘文件夹下创建一个app.js文件，在里面写js脚本，也可以使用import或者requires等方式引入其他的js脚本文件，在打包时，webpake会统一打包到一起的。

5.修改package.json文件

在package.json文件的scripts对象中，添加build脚本，如下，其中的config/webpack.config.js是你自己的webpack.config.js文件的路径和名称。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config config/webpack.config.js"
},

6.执行打包命令

在命令行运行npm run build命令，进行打包

1	npm run build

这样就算是入门了，至于其他的什么插件啦，loader啦，都是可以慢慢以后加上去的。

参考文章：
1.从零开始的Webpack4教程 (这个其实也是基础的使用方法了。)
2.webpack配置文件中的输入输出文件路径
3.webpack之输出路径处理 (这两篇文章其实多少没有什么用)
4.[webpack] 如何把代码内联进html中？ (使用html-webpack-inline-source-plugin将js和css内联到html中)

7.插件的执行顺序

假如我要先执行一个插件，然后在执行另一个插件怎么办，比如下面的，我要先进行打包之后，在进行MinifyHtmlWebpackPlugin，这样才是正确的。但是实际上呢，就算我配置了afterBuild:true，还是会有问题。

const {resolve} = require('path'); //node内置核心模块，用来设置路径。
const HtmlWebpackPlugin = require('html-webpack-plugin') // 打包html文件
const MinifyHtmlWebpackPlugin = require('minify-html-webpack-plugin'); //压缩html
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',   // 入口文件
  output: {                     // 输出配置
    filename: 'index.js',      // 输出文件名
    path: resolve(__dirname, '../dist')   //输出文件路径配置
  },
  mode: 'production'   //生产环境(二选一)
  ,plugins: [
    new MinifyHtmlWebpackPlugin({
        afterBuild:true,
        src: './dist',
        dest: './dist',
        rules: {
            collapseBooleanAttributes: true,
            collapseWhitespace: true,
            removeAttributeQuotes: true,
            removeComments: true,
            minifyJS: true,
            minifyCSS:true
        }
    }),
    new HtmlWebpackPlugin({
      template: './index.html',
      minify: {
          collapseWhitespace: true,
          removeComments: true,
          removeAttributeQuotes: true,
          removeEmptyAttributes: true
      }
    }),
    new CleanWebpackPlugin()
  ]
};

webpack 的插件执行顺序是从后往前执行的(这个信息，我不敢苟同)

参考文章：
1.webpack plugin执行顺序问题 (这是各问题，但是没有好的答案)
2.解析webpack plugin的生命周期，书写自己的第一个plugin (写自己的插件)
3.深入源码理解webpack是如何保证plugins的执行顺序的 (插件执行顺的原理)
4.webpack plugin内部运行机制 (讲了一个内部运行机制Tapable及其用法)

往期推荐

文章目录

微信公众号

广告位

诚心邀请广大金主爸爸洽谈合作

每日一省

isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

每日二省

为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

每日三省

== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

每日英语

Happiness is time precipitation, smile is the lonely sad.

幸福是年华的沉淀，微笑是寂寞的悲伤。