玩转webpack系列之webpack核心概念(一)

webpack核心概念之entry用法

Entry用来指定打包入口

上方依赖图的入口是entry,对于非代码，字体依赖也会不断加入到依赖图中。全部的模块之间会存在一些依赖关系， 所以webpack里面会根据entry找到它的依赖，入口文件的依赖也可能依赖其余的一些文件，在这棵依赖树上，只要遇到依赖，webpack就会将其加入到依赖图中，最终遍历完后才会生成一些打包资源。

Entry的用法

单入口：entry是一个字符串

module.exports = {
    entry:'./path/src/index.js'
}
复制代码

多入口： entry是一个对象

module.exports = {
    entry:{
        app:'./src/app.js',
        myapp:'./src/myapp.js'
    }
}
复制代码

核心概念之Output

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

Output的用法:单入口配置

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}
复制代码

Output的用法：多入口配置

module.exports = {
    entry: {
        app:'./src/app.js',
        search:'./src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    }
}
复制代码

[name].js经过占位符确保文件名称的惟一 , 单个入口的文件名是能够写死的，像这种多个入口就须要经过占位符对他进行一个区分。

核心概念之Loaders

webpack原生只支持js和json两种文件类型，经过Loaders去支持其余如css类型而且把它们转化成有效的模块，而且能够添加到依赖图中。

loaders自己是一个函数，经过接收源代码而后通过loaders这个函数转换以后。会输出一个结果给下一步去使用。

常见的Loaders有哪些？

babel-loader:转换ES6,ES&等JS新特性语法 css-loader:支持.css文件的加载和解析。 less-loader:将less文件转换成css
ts-loader:将TS转换成JS
file-loader:进行图片，字体等的打包

Loaders的用法

config.module
    .rule('css')
    .test(/\.css$/)
    .use('css')
    .loader('css-loader!')
module.export = config.toConfig();
复制代码

这里用到的是webpack-chain的配置方案，.test指定匹配规则，.use指定文件类型，.loader指定使用的loader名称。

核心概念之Plugins

Plugins一般是用于打包输出的js文件的优化，资源的管理，和环境变量的注入，做用于整个构建过程。

常见的Plugins有哪些？

module.exports = {
plugins:[
    new HtmlWebpackPlugin({
    template:'./src/index.html'
    })
]
复制代码

使用时只须要把你定义好的插件，放入plugins数组里就能够了。

核心概念之Mode

Mode是用来指定当前的构建环境是：production,development仍是none,默认状况下是production。

development:设置process.env.Node_ENV的值为development。

production: 设置process.env.Node_ENV的值为production。

none：不开启任何优化选项。

写在最后

笔者最近在学webpack,想跟你们一块儿交流分享。webpack系列会持续更新，欢迎关注，若是能够的话那就再点个赞吧~xixi