webpack基础入门

webpack安装以及使用方法

webpack的定义

weback准确来说是一个模块打包方式，它能自动识别如ES modulu 、commonJS 、 AMD 、CMD这样的模块导出方式，但是对于高级的一些加载方式并不能识别。webpack在最初时只能打包js文件件,后来能打包css，less等文件

全局安装方式

webpack的两种安装方式，全局安装

• 全局安装，一般情况下，当安装webpack-cli时，会自动的给安装上webpack 使用
  npm install webpack webpack-cli -g 完成全局安装，此时如果安装可在全局使用webpack -v 查询当前的版本号
• 局部安装，npm install webpack webpack-cli --save-dev 或者使用npm install webpack webpack-cli -D 进行安装 此时需要使用npx webpack -v才能查询当前的版本号，此时的npx表示能够在node_module文件夹中去找寻这个模块

版本号查询

使用npm info webpack即可查询当前webpack的所有版本

webpack打包方式

1. 全局安装webpack时，可以使用webpack 文件名 进行打包
2. 局部安装时，使用npx webpack 文件名 进行打包
3. 在package.json文件中，配置命名，在script文件指令中，配置buldle命令，其属性值为webpack,在此时不用写为npx webpack 因为此时在打包的过程中会自动找到当前目录下的node_modules

webpack配置文件

在使用webpack加文件名时，此时使用的是webpack的默认配置文件，要想按照制定的内容进行打包，需要进行指定的配置

1. webpack.config.js为webpack的配置文件夹，在里面可以写配置文件
2. 如果将默认配置文件夹的名字改为其他文件名，则需要使用npx webpack --config 其他的文件名。

基础配置webpack配置文件内容

下面所举例的就是写的一个简单的配置文件中的内容

const path = require('path');

module.exports = {
    mode: "production",
    entry:{
      main: "./src/index.js"
    },
    output: {
      filename:  'buldle.js',
      path: path.resolve(__dirname, 'dist')
    }
}

在上面文件中需要做一下几点的说明，即上面配置文件中配置参数的说明

• mode，表示打包的生成的文件是否为压缩，默认情况下默认的参数是production，此时表现形式为压缩形式当参数为development时，此时表现形式为非压缩形式。这两种的区别在于其打包生成的文件的大小不同，如果是上线就选择development模式，其他情况就两种都可以，看自己的需求。这就好比于你在用jq的时候，如果你想到jq的源码就选择非压缩版，如果你需要上线就选择压缩版
• entry，表示项目的入口文件，其中的main表示的就是你的入口文件名，打个比方说如果你所有的模块全部按需加载，都需要引入到你当前的入口文件中，这样webpack才能找到你所有需要打包的模块
• output，表示的就是你打包生成的出口文件，其中的filename表示你打包生成的文件名的名称，而path表示的就是你当前生成文件所需要放在的文件夹的名。在这里使用到的path.resolve(__dirname, 文件名)这关就是一种找寻路径的方式，在nodeJs中内置了一个path的对象，在这个对象中你可以通过resolve方法找到路径，其中的__driname表示的是当前文件的根目录下

注意的点

为什么会使用webpack-cli这个依赖包，该依赖包的作用是用于使得webpack这个命名能够在命令行使用

关于打包文件过程中产生的参数说明

• Hash 表示项目的唯一Hash值 Version表示webpack版本号 Time表示打包时间 Asset表示打包生成文件名
• chunk中放入的是每一个js文件对应的Id值 chunk Names 表示入口文件的的main参数

loader的含义

loader，翻译模板，对于webpack而言在没有配置时，默认打包的只能是js文件，如果想要去打包其他的文件形式，这里的其他文件形式包括less,sass,css等文件，就需要在webpack.config.js文件中去配置。

file-loader和url-loader

file-loader能够打包字体静态资源文件

• 作用：能够打包静态文件，如图片文件打包，使用url-loader能够打包所有file-loader打包的静态文件
• 区别：url-loader比file-loader多了一个limit配置参数，如果打包的静态文件大于这个配置参数，就会将其打包到一个文件夹中，如果小于配置参数的容量就会被打包到生成的js文件当中

style-loader和css-loader

这两个loader的作用是对于css文件进行模板翻译，翻译的时候需要这两个loader,其中css-loader的作用时查看多个css文件之间的关系，style-loader文件的作用是渲染样式在页面上，需要注意的是，这两者的顺序是不够颠倒的，在这个过程中满足从右到左，从下到上的原则，使用方式参照https://webpack.js.org/loaders/sass-loader/

sass-loader

作用：对于scss文件进行模板翻译，翻译的时候需要三个loader，从左到右分别为style-loader, css-loader ,sass-loader,表示的含义：先进行scss文件翻译，然后是css文件翻译，最后是渲染到页面上。与之类似的还有less-loader

css-loader中的importLoadersd与modules

• importLoadersd，该参数的参数值为2时，表示允许scss文件中的import导入
• modules，该属性的表现方式该文件为局部样式而不是全局样式，在这时导入的样式文件名为style

loader中涉及到的webpack.config.js中配置文件的形式如下

对于loader的使用如同下面配置文件，在rules下增加loader，rules中存放的是数组，数组中存放的就是需要一个个对象，对象中test属性用于匹配文件，use表示使用何种规则

const path = require('path');
module.exports = {
    mode: "production",
    entry: {
        main: "./src/index.js"
    },
    module: {
        rules: [
            {
                test: /\.(png|jpg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            name: '[name]_[hash].[ext]',
                            outputPath: 'images',
                            limit: 40210                    }
                    }
                ]
            },{
                test: /\.scss$/,
                use: [
                 'style-loader',
                 {
                     loader: 'css-loader',
                    //  options: {
                    //     importLoaders: 2,
                    //     modules: true
                    //  }
                 },
                 'sass-loader'
                ]
            },{
                test: /\.(eot|ttf|woff|woff2)$/,
                use:{
                    loader: 'file-loader'
                }
            }
        ]
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, "dist")
    }
}

plugin的含义

对于plugin可以这样来理解，webpack在运行到某个时候，帮你做的一些事情。这就好比在vue或者是react中的生命周期函数一样，在组件加载在某个时刻就执行对应的生命周期函数

html-webpack-plugin

• 在使用之前需要引入依赖包，引入依赖包可以通过npm或者是yarn来引入。
• 插件作用，会帮助生成一个html文件，并将打包好的js文件自动添加到这个html文件中，但是默认生成的html模板里面没有任何的结构，因此在使用时，需要引入自己定义好的html文件模板，此时只需要在实例中，传入一个实例对象，对象的属性名为template,属性值为文件的路径。需要注意的是，该插件运行的时间是在webpack打包完成之后才进行

clean-webpack-plugin

• 插件引入方式，在使用之前需要引入依赖包，引入依赖包可以通过npm或者是yarn来引入
• 插件作用，会在打包之前，去清除掉之前打包好的文件，在官方引入中引入的方式的方式是通过import {} from ‘’;的方式，在实例化的过程中也不需要去传入文件名的参数

output与entry基础配置

关于output与entry在上面已经说过了，在这里需要对entry的两个配置参数做说明

对于entry这个参数，其对应的的属性值有两种传入参数的方式

1. 如果传入的是单个文件，此时该参数可以是字符串，如果output中的传入的对象没有配置时，此时输出打包后的文件名为main.js；如果使用了filename这个属性，那么最后打包输出的名称为filename的属性值。
2. 如果入口文件是两个及其以上，那么配置entry的参数的属性值，为一个对象，在该对象的内部传入的属性，与属性值分别代表的意思就是打包后生成的文件的文件名，以及打包的入口地址，那么与此对应的output中，filename的属性值，就可以写成[name].js或者用[hash]_[name].js等方式，来说明有多个文件的引入

publicPath参数说明

该参数表示生成的打包好的文件，可以在一个相同域名下的文件中，如： ‘http://cdn.com.cn’,则此时就需要在output中新增publicPath: ‘http://cdn.com.cn’,在这里需要注意下，使用该参数时不能乱用，否则会出现路径错误

sourceMap使用

• sourceMap的作用，用于去检测打包生成后的bug检测，其表示一种映射关系，用于指出产生错误的源文件的位值
• devtool参数的说明
  • none：能够指出打包生成后的文件的错误代码的位置，但是不能指出源文件出错代码的错误
  • source-map: 能够找出源文件错误，但是会生成.map的文件
  • inline会将.map文件嵌入到打包生成的文件
  • module能够映射出模块、插件等这些依赖包中的问题
  • cheap 不会精确到列中的错误
  • eval 包裹模块代码
• 通常情况下各环境中推荐的参数
  • production下使用devtool: ‘cheap-module-eval-source-map’
  • development下使用devtool: ‘cheap-module-source-map’

webpack自动启动服务方式

对于webpack自动启动服务的方式有三种方式，如下所示

• 在webpack中的script下配置webpack --watch参数，但是这样做的不能实现自动刷新
• 使用devServer，能够启动界面，并且能完成自动刷新，并且启动时是在http协议下，即本地的服务器启动,此时需要在script下配置webpack-dev-server，同时还需要安装webpack-dev-server这个依赖。devserver的参数说明
  • contentBase用于指明打包生成的文件的位置
  • port用于说明启动端口的位置，默认指的是8080
  • proxy用于指明，当转到某个路由时，自动跳转到某个地址
• 使用node手动配置devserver,使用webpack-dev-middleware中间件启动

Hot Module Replacement使用

• 作用：当重新刷新界面时，可以使得刷新后的界面，保存之前的一些操作，只更改某些操作
  1. 对于css而言，当使用Hot Module Replacement后，可以更新其所有的内容，但是对于js的操作，会保存前一次的更新
  2. 对于js而言，可以一些操作，去检测到某个模块改变之后的状态
• 配置方式
  1. 首先需要在devServer中去配置hot参数设置为true,hotOnly参数设置为true
  2. 引入webpack,然后plugins中新增webpack.HotModuleReplacement()实例

plugin所涉及到webpack.config.js中的配置内容

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webapck = require('webpack');

module.exports = {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    entry: {
        main: './src/index.js'
    },
    devServer: {
        // contentBase: path.join(__dirname, 'dist'),
        contentBase: './dist',
        open: true,
        proxy: {
            '/api': "http://localhost:3000"
        },
        hot: true,
        hotOnly: true
    },
    module: {
        rules: [{
            test: /\.css$/,
            use:['style-loader','css-loader']
        }]
    },
    plugins: [
        new webapck.HotModuleReplacementPlugin(),
        new CleanWebpackPlugin(),
        new htmlWebpackPlugin({
            template: 'src/index.html'
        })],
    output: {
        publicPath: '/',
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist/')
    }
}

bebel

对于babel只需要知道的就是其能够将高级的es6及其es6以上的语法，转换为es5或者是es5一下的语法，这样做的原因是因为的一些浏览器对于这些高级语法不支持，只能支持低版本的语法

babel-loader的作用

作为一个桥梁，将本地的js文件与babel库连接起来

@babel/core

是一个babel的核心库，里面是关于所有的js中es6部分转为es5中的核心内容

@babel/preset-env

如果只是这种默认情况的话，用于es6转为es5的语法,对于es5中的有一些语法还是不能够被低版本的浏览器识别，如果要使得低版本的浏览器也能够识别就得使用Babel中的polyfill

@babel/polyfill

• 作用：对于一些低版本的浏览器，其不支持es5的语法，这时就使该库，将es5转为浏览器能够识别的语法规则，在这里使用可以使用useBuiltIns，其目的是为了实现按需加载的要求，不必要将所有的代码都进行转化，这样就能在性能上做到极大的优化
• 缺点：这种方式来实现转义会造成全局污染，当遇到类库或者是组件库的开发时，应该换另外的方式来实现,target参数作用，设置需要进行转义的浏览器的版本信息

其具体的使用方式如下：

1. 安装@babel/polyfill与@babel/preset-env这两个依赖
2. 在optios中配置presets参数，其参数值为 [[’@babel/preset-env’,{ targets: {chrome: “67”}useBuiltIns: ‘usage’}]]
3. 最后在需要转义的js文件中全局引入@babel/polyfill，具体为import ‘@babel/polyfill’
4. 注意：当在preset-env中设置了useBuiltIns时，是可以不用在js中引入import ‘@babel/polyfill’

@babel/plugin-transform-runtime

该插件的作用与polyfill的作用类似，但其弥补了polyfill的缺点，当遇到类库或者是组件库的开发时，就可以使用这种方式来对项目进行开发，具体的使用方式如下：

1. 首先安装@babel/plugin-transform-runtime和@babel/runtime两个库
2. 然后对其进行配置配置参数如webpack.config.js文件中所示
3. 当"corejs"的值为2时，还需要安装依赖@babel/runtime-corejs2
4. 最后对其进行打包即可完成所需要的配置

当babel中options的配置参数非常多时的处理方式

1. 在根目录下去创建.babelrc文件夹
2. 将options的文件夹中的配置内容放入到该文件中，并采用json配置的格式
3. 删除掉在webpack.config.js文件中的optios参数即可

使用react代码如何实现打包

1. 首先安装react与react-dom的依赖包
2. 其次是安装@babel/preset-react,用于去解析jsx语法
3. 在babelrc中配置参数，增加@babel/preset-react依赖包

总结

对于webpack的基础大概就是这样，这些都是常用的loader、plugin以及babel。对于其他的一些内容可以去官网查询使用，引文webpack中的loader与plugin是非常的多，对于具体的应该场景需要不同的loader与plugin，这时就可以在网上的博客中去看或者是在一些群里问大佬，这样就能在实际中锻炼自己的webpack使用能力。这里加一个自己在用到上述内容时的github地址，在里面就是对于上面所说的配置的应用。https://github.com/whocareit/webpack,对于webpack中的一些其他高级应用，待自己学完后再总结。