阅读 1282

玩转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