前端工具webpack-基础使用第1篇

开门见山

### 一. 概述

什么是webpack

模块打包机：它做的事情是，分析你的项目结构，

找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言

（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

### 为什么使用webpack

现在是网络时代，在我们的生活中网络成为了必不可少的，

我们在网络上可以看到很多漂亮功能丰富的页面，

这些页面都是由复杂的JavaScript代码和各种依赖包组合形成的，

那么这些都是怎么*组合在一起的呢，组合在一起需要花费多少精力呢，

经过漫长发展时间现前端涌现出了很多实践方法来处理复杂的工作流程，让开发变得更加简便

安装webpack

安装为开发依赖
npm安装,命令行输入: npm i webpack webpack-cli -D

安装为开发依赖
cnpm安装,命令行输入:npm i webpack webpack-cli -D

安装为开发依赖
yanr安装,命令行输入:yarn add webpack webpack-cli --save

webpack快速上手

文件目录如上，在项目的根目录下运行命令行: yarn webpack 即可

如果觉得yarn webpack比较麻烦，可以在scripts 生成自定义的命令

然后自动生成一个dist文件夹里面包含经过webpack打包过后的文件

webpack配置文件

webpack支持0配置，默认从src文件的index.js 打包到dist文件夹下的main.js，但是很多时候我们需要自己配置webpack更好地项目开发

项目的根目录下新建一个webpack.config.js 配置如下，这个文件运行在nodejs的环境下也就是说遵循commonjs规范

const path = require('path');

module.exports = {

    mode: "development", //none/development/production

    entry: "./src/index.js", //项目的入口文件，如果是相对路径./是不能省略的

    publicPath: "dist/", //公共路径，此处的“/”不能省略

    output: {//指定输出文件的路径和文件名

        filename: "bundle.js", //输出的文件名

        path: path.join(__dirname, 'output') //指定输出的路径

    },
    module: {
        rules: [{
            test: /.css$/,
            use: [
                'style-loader', 'css-loader'
            ]
        }]
    }

}

webpack工作模式

mode是webpack4新增的一条属性，它的意思为当前开发的环境。

mode的到来减少了很多的配置，它内置了很多的功能。相较以前的版本提升了很多，减少了很多专门的配置

优点如下

提升了构建速度

默认为开发环境，不需要专门配置

提供压缩功能，不需要借助插件

提供SouceMap，不需要专门配置

mode分为两种环境，一种是开发环境（development）,一种是生产环境（production）/ none。

开发环境就是我们写代码的环境，生产环境就是代码放到线上的环境。这两种环境的最直观区别就是，

开发环境的代码不提供压缩优化打包结果，生产环境的代码提供压缩。开发环境优化打包速度添加一些辅助工具到我们的代码当中方便调试

node模式运行最原始的打包不会做任何的处理

mode: "development", //none/development/production  在配置文件加上这个选项即可

webpack资源模块加载

webpack打包css文件，需要使用css-loader和style-loader，用于解析css样式文件

 module: {
        rules: [{
            test: /.css$/,//css正则表达式文件路径
            use: [
                'style-loader', 'css-loader'//使用成css-loader和style-loader
                //用于解析css样式 从后往前执行loader
            ]
        }]
    }

webpack加载文件模块

在js中引入css文件只需要 import "./main.css"文件，webpack在打包的时候自动会自动引入文件

谢谢观看，如有不足，敬请指教