什么是Webpack

webpack是一个静态的模块化打包工具

官方图片

Webpack的运行是依赖Node环境的，所以电脑上必须有Node环境

Webpack安装

要安装webpack、webpack-cli，全局安装命令：npm install webpack webpack-cli -g

基本打包

直接在终端执行webpack命令，运行结束后在项目文件中多出一个dist文件夹，里面的main.js 文件就是最终压缩好的文件，如图：如果不打包的话，直接在html文件用script脚本执行js代码会报错，通过webpack打包后，这样就能在浏览器访问了。

因为不同的项目使用的Webpack版本可能不一样，所以不会全局安装，是局部安装，安装到开发依赖里，命令：npm i webpack webpack-cli -D

但是在此项目中执行webpack找到的还是全局webpack，要想找到项目使用的webpack，有以下方式：

用npx命令 npx webpack
修改package.json中的script，如下图，然后执行命令npm run build即可

不管使用以上哪种命令，webpack自动找到当前目录下的src文件下的index.js文件进行打包，如果没有这个js文件，就会报错

webpack如何对项目打包呢？

webpack在处理应用程序时，它会根据命令或者配置文件找到入口文件；
从入口开始，会生成一个依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块（比如.js文件、css文件、图片、字体等）；
然后遍历图结构，打包一个个模块（根据文件的不同使用不同的loader来解析）。

css-loader

webpack支持CommonJS、AMD、ESModule这些模块化，所以默认可以打包.js文件，但是.css文件wenpack不认识，如下图，所以需要一个loader来处理这个文件的类型。

那么loader是什么呢？

loader可以用于对模块的源代码进行转换；
可以将css文件也看成是一个模块，通过import来加载这个模块的；

css-loader安装：npm i css-loader -D

使用css-loader：

内联方式：（少用）

在导入css文件的时候，在文件路径前面加上css-loader!

import 'css-loader!../css/style.css'

配置方式：

webpack.config.js

const path = require('path')
module.exports = {
  output:{
    path:path.resolve(__dirname,'./dist'),
    filename:'main.js'
  },
  module:{
    rules:[
      {
        test:/\.css$/,  //正则表达式
        loader:'css-loader'
      },
    ]
  }
}

style-loader

css-loader只负责将.css文件解析，还需要style-loader把这个style插入到html中

style-loader安装：npm i style-loader -D

在webpack.config.js的use中配置时，loader加载顺序从后到前，所以要把css-loader写到后面

const path = require('path')
module.exports = {
  output:{
    path:path.resolve(__dirname,'./dist'),
    filename:'main.js'
  },
  module:{
    rules:[
      {
        test:/\.css$/,  //正则表达式
        // loader:'css-loader'
        use:[
          'style-loader',
          'css-loader'
        ]
      },
    ]
  }
}

到这一步，css真正生效，查看html页面，可以发现在head标签里多了一个style标签，里面是css代码

less-loader

less编写的css需要通过less工具转换成普通的css代码，先安装less：npm i less -D，然后使用：npx lessc xxx.less xxx.css（意思是把xxx.less转换成xxx.css）

如果要转换的代码太多，手动用less一个一个文件处理不过来，可以使用less-loader，自动使用less工具转换less到css

less-loader安装：npm i less-loader -D

然后配置webpack.config.js

{
    test:/\.less$/,
    use:[
        {loder:'style-loader'},
        {loder:'css-loader'},
        {loder:'less-loader'}
    ]
}

postcss-loader

使用postcss-loader进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置

postcss需要有对应的插件才会起效果，所以需要配置它的plugin：

postcss.config.js

module.exports = {
    plugins:[
        'postcss-preset-env'
    ]
}

本来直接使用postcss工具的时候，需要使用autoprefixer插件，但是在配置postcss-loader的时候，配置插件不需要使用autoprefixer，而是使用另一个插件postcss-preset-env，它可以将一些现代的CSS特性，转成大多数浏览器认识的CSS，并且会根据目标浏览器或者运行时环境添加所需的polyfill，还会自动添加autoprefixer插件。

安装postcss-preset-env：

npm install postcss-preset-env -D

Webpack简单使用