• 玩转webpack（02）：webpack基础使用

    一、核心概念——entry

    Entry用于指定webpack打包的入口

     1、单入口（entry是一个字符串）

    1. module.exports = {
    2.     entry: './src/index.js'
    3. }

    2、多入口（entry是一个对象）

    1. module.exports = {
    2.     entry:{
    3.         app: './app.js',
    4.         adminApp: './src/adminApp.js'
    5.     }
    6. }

    二、核心概念——output

    output用来告诉webpack如何将编译后的文件输出到磁盘

    1、单入口

    1. module.exports = {
    2.     entry: './src/index.js',
    3.     output: {
    4.         filename: 'bundle.js',
    5.         path: __dirname + '/dist'
    6.     }
    7. }

    2、多入口

    1. module.exports = {
    2.     entry:{
    3.         app: './app.js',
    4.         adminApp: './src/adminApp.js'
    5.     },
    6.     output: {
    7.         filename: '[name].js', // 通过占位符确保文件名的唯一
    8.         path: __dirname + '/dist'
    9.     }
    10. }

    三、核心概念——loaders

    webpack默认只支持js和json两种文件类型，通过loaders去支持其他文件类型并且把他们转化成有效的模块，并且可以添加到依赖图中。


    本身是一个函数，接受源文件作为参数，返回转换的结果。

    1、常见的loader

    名称描述
    babel-loader转换ES6、ES7等JS新特性语法
    css-loader支持.css文件的加载和解析
    less-loader将less转换为css
    ts-loader将TS转换成JS
    file-loader进行图片、字体的打包
    raw-loader将文件以字符串的形式导入
    thread-loader多进程打包JS和CSS

    2、loader的用法

    1. module:{
    2.     rules: [
    3.         {
    4.             test: /\.txt$/,    // test：指定匹配规则
    5.             use: 'raw-loader'    // use：指定使用的loader名称
    6.         }
    7.     ]
    8. }

    四、核心概念——plugins

    插件用于bundle文件的优化，资源管理和环境变量注入

    作用于整个构建过程

    1、常见的plugins

    名称描述
    CommonsChunkPlugin将chunks相同的模块代码提取成公共js
    CleanWebpackPlugin清理构建目录
    ExtractTextWebpackPlugin将css从bundle文件里提取成一个独立的css文件
    CopyWebpackPlugin将文件或者文件夹拷贝到构建的输出目录
    HtmlWebpackPlugin创建html文件去承载输出的bundle
    UglifyjsWebpackPlugin压缩JS
    ZipWebpackPlugin将打包的资源输出生成一个zip包

    2、plugins用法

    1. plugins:[
    2.     new HtmlWebpackPlugin({    // 放到plugins数组里
    3.         template: './src/index.html'
    4.     })
    5. ]

    五、核心概念——mode

    mode用来指定当前的构建环境是：production、develoment还是node

    设置mode可以使用webpack内置的函数，默认值为production

    1、mode的内置函数功能

    选项描述
    development设置 process.env.NODE_ENV 的值为 development.开启 NamedChunksPlugin 和 NamedModulesPlugin .
    production设置 process.env.NODE_ENV 的值为 production.开启
    FlagDependencyUsagePlugin ， FlagInclu dedChunksPlugin ModuleConcatenationPlugin ， NoEmitOnE rrorsPlugin , Occurrence0rderPlugin ，SideEffectsFl agPlugin 和 TerserPlugin .
    none不开启任何优化选项

    六、使用

    1、使用babel-loader解析ES6和React JSX

    babel的配置文件是：.babelrc

    （1）安装

    1. npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react
    2. npm i react react-dom

    （2）增加ES6的babel preset配置 （.babelrc）

    1. {
    2.     "presets": [
    3.         "@babel/preset-env",
    4.         "@babel/preset-react"
    5.     ]
    6. }

    （3）新增文件reactTest.js

    1. 'use strict';
    2. import React from "react";
    3. import ReactDOM from "react-dom";
    4.  
    5. class ReactComponents extends React.Component {
    6.     render() {
    7.         return <div>Hello Reactdiv>;
    8.     }
    9. }
    10.  
    11. ReactDOM.render(
    12.     <ReactComponents />,
    13.     document.getElementById('root')
    14. )

    （4） 修改webpack.config.js

    1.  'use strict'
    2.  
    3.  const path = require('path');
    4.  module.exports = {
    5.     entry: {
    6.         main: './src/index.js',
    7.         reactTest: './src/reactTest.js'
    8.     },
    9.     output: {
    10.         path: path.join(__dirname, 'dist'),
    11.         filename: '[name].js'
    12.     },
    13.     mode: 'production',
    14.     module: {
    15.         rules: [
    16.             {
    17.                 test: /\.js$/,
    18.                 use: 'babel-loader'
    19.             }
    20.         ]
    21.     }
    22.  }

    2、css、less、sass解析

    css-loader用于加载.css文件，并且转换成commonjs对象

    style-loader将样式通过