webpack学习2.3webpack核心概念

核心概念(四个)

1. Entry(入口)
2. Output(出口)
3. Loaders()来处理其他类型的资源文件
4. 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有两个目标:

1. test属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
2. 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;

总结常用的插件

优化相关:

　　　　CommonsChunkPlugin  提取不同chunk之间到那时有相同的代码的提取出单独的chunk(代码块)

　　　　UglifyjsWebpackPlugin 压缩代码

功能相关  ExtractTextWebpackPlugin  CSS可以提取出来做一个单独的文件,提取出到打包成单独CSS文件

HtmlWebpackPlugin  用来生成HTML的

HotModuleReplacementPlugin  模块更新的插件

CopyWebpackPlugin    帮助拷贝文件

什么是Chunk? Chunk(打包前)也就是代码块,在webpack中打包会默认把这些代码分成一个个代码块

什么是Bundle?Bundle也就是打包过以后,的代码

什么是Module?loader把一个个文件转化为模块,loaders处理完就是module(模块)