webpack 从基础到进阶 2

酒窝yun过去了
306 阅读1分钟

webpack 基础用法

核心概念 --- Entry

Entry 用来指定 webpack 的打包入口

理解依赖图的含义

alt

  • 依赖图的入口是 entry

  • 对于非代码比如： 图片、字体依赖也会不断的加入到依赖图中

Entry 的用法

单入口： entry是一个字符串

module.exports = {
    entry: './path/to/my/entry/file.js'
}

多入口： entry 是一个对象

module.exports = {
    entry: {
        app: './src/app.js',
        adminApp: './src/adminApp.js'
    }
}

核心概念 --- output

  • Oouput 用来告诉 webpack 如何将编译后的文件输出到磁盘
output 的用法： 单入口配置
module.exports = {
    entry:'./path/to/my/entry/file.js',
    output:{
        filename: 'bundle.js',
        path: __dirname + '/dist'
    }
}
output 的用法： 多入口配置
module.exports = {
    entry: {
        app: './src/app.js',
        search: './src/search.js'
    },
    output: {
        filename: '[name].js',    ---------->  通过占位符确保文件名称的唯一
        path: __dirname + './dist' 
    }
}

核心概念 --- loaders

  • webpack 开箱即用只支持js和json 两种文件类型， 通过loaders 去支持其他的文件类型并且把他们 转化成有效的模块，并且可以把他们转化成有效的模块，并且可以添加到依赖图中
  • 本身是一个函数， 接受源文件作为参数，返回转换的结果

常用的loaders

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

loaders 的用法

const path = require('path');

module.exports = {
    output: {
        filename:'bundle.js'
    },
    module: {
        rules:[
        {test:/\.txt$/,use: 'raw-loader'}  ---->  test 指定匹配规则
                                                  use  指定使用的loader名称
        ]
    }
}

核心概念 --- plugins

  • 插件用于 bundle 文件的优化， 资源管理和环境变量的注入
  • 作用于 整个构建过程

常见的 plugins

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

Plugins 的用法

const path = require('path');

module.exports = {
    output:{
        filename: 'bundle.js',
    },
    plugins: [
        newHtmlWebpackPlugin({
            template: './src/index.html'   ------->  放到 plugins 的数组里
        })
    ]
}

核心概念 --- mode

  • Mode 用来指定当前的构建环境是： production、development、还是 none
  • 设置 mode 可以使用 webpack 内置的函数， 默认值为 production

Mode 的内置函数

选项 描述
development 设置 process.env.NODE_ENV 的值为 development. 开启 NameChunkPlugin 和 NameModulesPlugin.
production 设置 process.env.NODE_ENV 的值为 production. 启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.
none 不开启任何优化项

资源解析： 解析 es6

  • 使用 babel-loader
  • babel的配置文件是: .babelrc
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    + module: {
    +     rules: [
    +         {
                  test: /\.js$/,
                  use: 'babel-loader'
              }
          ]    
    }
}

资源解析： 增加es6的 babel preset 配置

{
    'presets':[
    + "@babel/preset-env"   ------->   增加es6的 babel preset 配置
    ],
    "plugins": [
      "@babel/proposal-class-properies"
    ]
}

资源解析： 解析 React JSX

{
    'presets':[
      "@babel/preset-env",   
    + "@babel/preset-react"   ------->   增加react的 babel preset 配置
    ],
    "plugins": [
      "@babel/proposal-class-properies"
    ]
}

后序，webpack 从基础到进阶 3

avatar
文章
阅读
粉丝