Webpack 4 学习02(使用配置文件进行打包)

Posted 邢走在云端

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Webpack 4 学习02(使用配置文件进行打包)相关的知识,希望对你有一定的参考价值。

上一讲中我们打包没有用到webpack.config.js配置文件,webpack4把自己定位为一个零配置的工具。这一讲学习配置文件使用,更好地学习webpack。

上一讲 Webpack 4 学习01(基础配置)

  • 根目录下新建一个webpack.config.js文件 (记载配置信息)

    技术图片

  • 配置文件

     const path = require('path');
    
     module.exports = {
       entry:'./public/index.js',
       output:{
         path:path.resolve(__dirname,'build'),
         filename:'bundle.js'
       }
     }
    字段 意义
    entry 入口,所需打包的文件的路径
    output 出口
    path 文件打包后存放的路径
    path.solve() 将路径或者路径片段的序列处理成绝对路径
    _dirname 表示当前文件所在目录的绝对路径
    filename 打包后文件的名称
  • 按照配置项新建一个入口文件public/index.js

    技术图片

  • 运行npm run dev

以上是关于Webpack 4 学习02(使用配置文件进行打包)的主要内容,如果未能解决你的问题,请参考以下文章

Webpack 4 学习01(基础配置)

Webpack 4 学习11(用clean-webpack-plugin来清除文件)

webpack的学习使用二

Webpack 4 学习03(配置入口和出口的进阶使用)

webPack 4.0的零基础学习

webpack的入门学习