从零学习webpack4.0模块打包工具

首先webpack是一个基于nodejs的打包工具，使用webpack，可使咱们的代码耦合度下降。拆分红模块化开发。

1.webpack到底是什么

之前咱们操做dom，须要把js代码所有写在一块儿，可是这样很不容易管理和维护，因此出现了webpack咱们能够将文件按需导入和导出，用webpack会帮咱们根据他的语法生成对应的代码。

相关语法可查看webpack官方文档：中文文档

2.webpack正确安装方式

在须要使用webpack打包的项目目录执行npm安装

局部安装 npm i webpack webpack-cli -S
全局安装 npm i webpack webpack-cli -D
安装指定版本 npm i webpack@4.3.5 webpack-cli -S
删除 npm  uninstall  webpack  -g
查看当前webpack版本 npx webpack -v
使用webpack打包文件 npx webpack index.js
复制代码

npx执行的当前项目目录下node_moudels中的webpack。

注意：webpack安装最好不要全局安装，以防版本混乱致使报错。

3.如何使用webpack

1.首先咱们须要使用npm命令初始化一个项目

按需生成   npm init
默认初始化 npm init -y
复制代码

此时项目文件夹下会出现一个package.json文件，里面包含了一些项目信息

{
    "name": "dome01",------------------------项目名称
    "version": "1.0.0",----------------------版本号
    "description": "", 
    "main": "a.js",--------------------------项目入口文件，可删除
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {},---------------------上线环境依赖包
    "devDependencies": {--------------------开发环境依赖包
        "webpack": "^4.43.0",
        "webpack-cli": "^3.3.11"
    }
}
复制代码

2.局部安装webpack和webpack-cli

npm i webpack webpack-cli -S
复制代码

此时文件夹下会出现node_moudles文件夹，里面包含了一些webpack的依赖包。

3.接下来咱们就能够在项目中按照webpack的api来书写项目代码啦。

写完后经过

npm webpack 项目路径 
复制代码

来打包项目。

4.webpack打包原理

到目前为止，咱们知道webpack打包直接执行npx webpack 项目路径 就能够生成dist目录，完成打包工做，可是这是为何呢？这是由于webpack自己就有一套默认的打包文件，他会默认按照他的意思去打包。

可是一般开发环境下，咱们须要本身配置打包需求。 当咱们执行 npx webpack 若是不指定打包文件，控制台就会报错，其实执行命令的时候webpack会自动去项目路径下面寻找打包的配置文件，webpack.config.js文件，找到并去执行他它。

1.首先，咱们须要在项目路径下面建立一个webpack.config.js文件

const path = require('path')---------------------------导入node读文件api
module.exports = {
    entry: './abc.js',---------------------------------入口：须要打包的文件路径
    output: {------------------------------------------出口：打包完成的文件配置
        filename: 'aaa.js',----------------------------打包完成后生成的js文件
        path: path.resolve(__dirname,'aaa')-----------打包完成后aaa.js放置的位置，
        __dirname,表示当前项目目录下，aaa表示生成的文件夹名字，不设置的话，默认是dist文件夹。
    }
}
复制代码

执行npx webpack 后可发现文件目录多出了aaa文件夹。

5.npm工具为咱们提供了方便偷懒的script模块

在package.json文件目录中有一个script对象,在这里面咱们可使用定义咱们本身的命令，经过 npm run 来快速运行它

{
    "name": "dome01",
    "version": "1.0.0",
    "description": "",
    "main": "a.js",
    "scripts": {
      build : webpack 或 npx webpack ,-------由于script默认寻找webpack会去node_modlues中去找依赖，因此不加npx也不用担忧会使用到全局的webpack。
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {},
    "devDependencies": {
        "webpack": "^4.43.0",
        "webpack-cli": "^3.3.11"
    }
}
复制代码

6.咱们能够本身配置想要的webpack打包方式

1.通常状况下，咱们会把须要打包的项目文件放到src目录下

2.配置咱们本身的webpack.config.js文件

const path = require('path')
module.exports = {
    entry: './src/index.js',--------咱们也能够直接写 './src'，默认回去找src下的index.js文件
    output: {
        filename: 'aaa.js',
        path: path.resolve(__dirname, 'aaa')
    }
}
复制代码

3.执行npm run build 能够看到打包成功

7.使用Loader打包静态资源文件 (图片篇)

由于webpack默认只能打包.js文件，其余像.css、.vue、.jpg|.png这样的文件没法打包，此时咱们须要引入他们对应的loader来完成打包工做。

1.首先咱们须要在webpack.config.js文件中配置module模块

const path = require('path')
module.exports = {
    entry: './src',
    output: {
        filename: 'aaa.js',
        path: path.resolve(__dirname, 'aaa')
    },
    module: {--------------------------------------------此处配置loader
        rules: [{----------------------------------------loader规则，数组包含多个loader
            test: /\.(jpg|png)$/,--------------------正侧匹配以.jpg .png结尾的文件进行打包
            use: {---------------------------------------打包的配置
                loader: 'file-loader',-------------------使用的打包loader
                options: {-------------------------------打包输出时的配置
                    name: '[name].[ext]',----------------打包文件输出名字，[name]表示原始名字，[]表示用原始文件后缀               
                    outputPath: './img/',----------------打包后的文件放在dist目录下的img文件夹下
                }
            }
        }]
    }
}
复制代码

2.使用前咱们须要安装对应的loader

npm i file-loader -D
复制代码

不懂查看官方文档的filer-loader部分

3.执行npm run build完成打包，生成目录结构以下

8.file-loader和url-loader的区别

在使用file-loader打包文件时,生成的文件老是会存在于dist目录下，可是若是使用了url-loader来实现文件的打包，咱们能够经过在options中配置limit属性来限制文件输出的地方。

1.首先webpak.config.js代码配置以下

const path = require('path')
module.exports = {
    mode: 'development',------------为了出去浏览器警告，写上mode，能够控制打包生成的文件时development环境（未压缩），仍是production环境（会压缩）
    entry: './src',
    output: {
        filename: 'aaa.js',
        path: path.resolve(__dirname, 'aaa')
    },
    module: {
        rules: [{
            test: /\.(jpg|png)$/,
            use: {
                loader: 'url-loader',--------------引入url-loader
                options: {
                    name: '[name].[ext]',
                    outputPath: './img/',
                    limit: 300000 //30万字节=300kb-------限制图片大小为300kb，若图片小于300kb则，将图图片打包进js代码中（可减小发送http请求次数），若图片大于300kb，则按照file-loader方式打包如dist文件目录下
                }
            }
        }]
    }
}
复制代码

url-loader能够智能的根据图片的大小来决定图片打包的方式，若图片小，能够写入js代码中，从而来减小http求情次数。若图片大，则写入文件目录，防止写入js中，由于js过大而致使页面白屏时间过长。

9.使用Loader打包静态资源文件 (样式-上篇)

若是想要实现对css样式进行打包，则须要使用style-loader和css-loader

1.使用style-loader和css-loader解析样式

1.首先一样在webpack.config.js文件下配置rules

const path = require('path')
module.exports = {
    mode: 'development',
    entry: './src',
    output: {
        filename: 'aaa.js',
        path: path.resolve(__dirname, 'aaa')
    },
    module: {
        rules: [{
            test: /\.(jpg|png)$/,
            use: {
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: './img/',
                    limit: 300000 //30万字节=300kb
                }
            }
        }, {
            test: /\.css$/,---------------------识别以.css为结尾的文件
            use: [{
                    loader: 'style-loader'------后执行style-loader将编译的css样式插入页面head表签中的style中
                },
                {
                    loader: 'css-loader'------先执行css-loader解析webpack方式引入的css中的代码
                }
            ]
        }]
    }
}
复制代码

2.安装安装style-loader和css-loader

2.使用sass预编译器配置sass-loader

1.只需在package.json文件中加入sass-loader便可,注意顺序，webpack解析自下而上

const path = require('path')
module.exports = {
    mode: 'development',
    entry: './src',
    output: {
        filename: 'aaa.js',
        path: path.resolve(__dirname, 'aaa')
    },
    module: {
        rules: [{
            test: /\.(jpg|png)$/,
            use: {
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: './img/',
                    limit: 300000 //30万字节=300kb
                }
            }
        }, {
            test: /\.scss$/,
            use: [{
                    loader: 'style-loader'
                },
                {
                    loader: 'css-loader'
                },
                {
                    loader: 'sass-loader'
                }
            ]
        }]
    }
}
复制代码

便可使用sass语法书写css样式

2.安装 sass-loader和node-sass

npm install sass-loader node-sass webpack --save-dev
复制代码

安装 node-sass可能会报错，是因为GitHub资源太烂，此时使用淘宝镜像地址安装node-sass

npm i node-sass -D  --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
复制代码

3.css文件，使用.scss后缀,不要使用.sass后缀，会报错。

打包后文件目录：

3.使用postcss-loader给css样式增长浏览器前缀

1.首先，咱们须要在项目目录下建立一个postcss.config.js文件

里面写入postcss-loader的依赖配置，当打包文件执行到postcss-loader的时候将会执行postcss.config.js文件。

2.咱们须要先安装autoprefixer插件。

npm i autoprefixer -D
复制代码

3.在postcss.config.js中使用它。

module.exports = {
    plugins: [
        require('autoprefixer')------------------------------引入autoprefixer插件
    ]
}
复制代码

4.局部安装postcss-loader

npm i postcss-loader -D
复制代码

5.便可发现打包的css代码中加入了浏览器前缀