基本概念

entry

入口文件

module.exports = {
    entry:"./path/entry/file.js"
}

output

输出文件

const path = require('path');

output:{
    entry:"./path/entry/file.js",
    output:{
        path.resolve(__dirname,'dist'),
        filename:"outfilename.js"
    }
}

loader

就是将非js的文件,转化成webpack可以处理的有效模块。就是用于转换某种类型的模块。

test属性,用来查找对应的文件
use 属性,指定相应的loader

plugins

插件可以执行更多的任务,打包优化,压缩等。使用的时候只需要require,然后在plugins数组中new出来,并指定相应的一些参数。

const HtmlWebpackPlugin = require('html-webpack-plugin');    //需要通过npm安装,然后使用

const webpack = require('webpack');        //访问的是内置的插件

知识点: 入口文件可以多条配置,但是output文件只能有一条

entry 可以根据不同的应用需求,指定不同的入口文件,也就是说在设置入口文件的时候可以设置多条配置。比如:

const config = {
    entry:{
        app:'./src/app.js',
        search:'./src/search.js'
    }
};

module.exports = config

如上,entry指定了两条入口文件,但是output只能配置两个属性,filename,path。这样并不是说只能导出一个文件,其实是可以导出过个资源的可以通过占位符的方式。这种情况其实还有很多,多个入口,代码拆分,多种插件创建了多个bundle,都应该使用占位符的方式去赋予每个bundle,一个唯一的名字,方法如下。

使用入口名字

filename:"[name].bundle.js"

使用内部的check id

filename:"[id].bundle.js"

使用每次创建过程中,唯一的hash生成

filename:"[hash].bundle.js"

使用每个chunk内容的hash:

filename:"[chunkhash].bundle.js"

知识点:强大的loader

可以将typescript转换成javascript,可以将内联的图片转换成data URL,可以将.css文件打包到js文件中。

module.exports = {
    module:{
        rules:[
            {test:/\.css$/,use:'css-loader'},
            {test:/\.ts$/,use:'ts-loader'}
        ]
    }
}

use的属性可以指定一个字符串,也可以指定一个对象数组。也就是说指定多个loader