webpack学习2.3webpack核心概念

最新推荐文章于 2022-01-04 11:05:10 发布

ChorKiu

最新推荐文章于 2022-01-04 11:05:10 发布

阅读量116

点赞数

本文链接：https://blog.csdn.net/sinat_39326239/article/details/100591482

版权

核心概念(四个)

Entry(入口)
Output(出口)
Loaders()来处理其他类型的资源文件
Plugins(插件)

1.入口(Entry)

作用:代码的入口,打包的入口,单个或多个,

示例一:传入文件路径

module.exports = {
       entry:' index.js '      
}

示例二:传入一个数组, 向entry属性传入[ 文件路径数组 ] 将创建 " 多个主入口(multi-main entry) "

module.exports = {
       entry:[ ' index.js ' ,' wendor.js ' ]     
}

示例三:传入对象(推荐具体看webpack的API) ,与前两样不同的是,前两种方式entry指定的是一个属性,也可以是元素对象,entry是一个代码块(tank),使用对象的方式有几个好处:很容易增加一个入口,方便

module.exports = {
       entry:{
             index: ' index.js ' 
       }
}

2.出口(output)

作用:打包生成的文件(bundle) 一个或多个自定义规则

在 webpack 中配置 output 属性的最低要求是，将它的值设置为一个对象，包括以下两点:

filename 用于输出文件的文件名。
目标输出目录 path 的绝对路径

示例一:最简单的用法表示打包后的inde.min.js文件将输出到/home/proj/public/assets目录下

module.exports = {
      entry: ' index.js ',
      output: {
            filename:' index.min.js ' ,
            path: '/home/proj/public/assets '
} }

示例二:多个入口起点(如果配置创建了多个单独的"chunk",应该使用占位符来确保每个文件具有唯一的名称)

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

// 写入到硬盘：./dist/app.js, ./dist/search.js

3.Loaders(要定义在module.rules中)

作用:Loader是让webpack处理除了非JS文件(webpack本身只能理解JS文件),loader可以把所有类型的文件转为webpack能够处理的有效模块.

在webpack的配置中loader有两个目标:

test属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性，表示进行转换时，应该使用哪个 loader。

示例一:当webpack编译器遇到在[require()/import语句]被解释为''.txt"的路径,在打包之前要使用[raw-loader]转换一下

const path = require('path');
const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};
module.exports = config;

示例二:因为Loaders是是对模块源码的转换,所以有时候要先安装需要转换的文件,再在module.rules里面设置

Step1:安装对应的loader,例如需要加载CSS文件,typescript文件

npm install --save-dev style-loader
npm install --save-dev css-loader
npm install --save-dev ts-loader

Step2:指示webpack对应遇到文件需要调用一下的loader

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }.
       { test: /\.ts$/, use: 'ts-loader' }
    ]
  }

总结常用的Loader

编译相关:Babel-loader ts-loader

样式相关:style-loader css-loader less-loader postcss-loader

文件相关:file-loader url-loader

4.插件( Plugins )

作用:参与打包整个过程打包优化与压缩配置编译时的变量极其灵活,插件目的在于解决loader无法是实现的事

用法:插件可以携带参数/选项,需要在webpack配置种,向plugins属性传入new实例

Step1:安装插件(html-webpack-plugin为例)

npm install html-webpack-plugin

Step2:配置

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;