webpack

webpack是什么

webpack就是一个打包工具，浏览器只能识别.js.jpg等少部分的文件，通过webpack可以将一些不同文件后缀名的转换成浏览器可以识别的文件

webpack与node的关系

webpack 本身依赖于node执行，必须先安装node之后才能安装webpack,node安装之后会自带一个包管理工具npm，我们可以使用npm安装对应的包

webpack安装

1
npm install webpack -g

webpack打包js文件

1
2
3
4
#对main文件进行打包，这样子就会将main文件中所有引用的内容以及本身的内容进行打包，存放到budle.js文件中
webpack ./src/main.js ./dist/bundle.js

然后在主文件中我们只需要引用bundle.js就可以了

webpack配置文件

webpack配置文件

1
2
3
4
5
6
7
8
9
10
webpack.config.js
    const path = require('path') # 导入node包，用于找到当前文件路径
    module.exports ={
        entry:'./src/main.js', #输入文件路径
        output :{
            path:path.resolve(__dirname,'dist'), #输出的文件夹路径，不能使用相对路径
            filename : 'bundle.js' #输出的文件名称
        },
    }

package.json

package.json是通过npm init生成的，我们可以通过这个文件去知道这个项目的一些基本信息，以及做到类似makefile的功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1.执行命令
npm init #然后一路回车即可
2.package.json
{
  "name": "practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {  //脚本，在这里写命令之后可以通过npm run 去实现后续的命令，例如npm run build == webpack
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {  //包依赖
    "webpack": "^3.6.0"
  }
}

loader

webpack 打包直接下载后只能支持基础的打包，如果想要支持css获其余类型文件的打包必须要下载对应的loader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
官方文档地址https://webpack.docschina.org/loaders/css-loader 
(1)安装
npm install --save-dev css-loader //这个loader只负载加载，如果想要css文件生效还需要style-loader
npm install --save-dev style-loader //这个loader负责渲染
(2)配置
webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i, //这里是正则表达式，代表对所有的css文件进行匹配，去执行下面的loader
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};