webpack的配置文件

最新推荐文章于 2023-08-21 22:39:28 发布

原创最新推荐文章于 2023-08-21 22:39:28 发布 · 458 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #前端 #node.js

wepack 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在项目中安装特定版本的Webpack及CLI，并提供了一个基本的Webpack配置示例，包括入口文件、输出路径等关键设置。

我们在执行了npm init之后，需要在项目内安装webpack

npm install webpack@4.26.0 webpack-cli@3.1.2 -D

默认安装最新的，我这是安装了指定版本，并没有全局安装，全局安装会出现不同的项目因为webpack版本不一致问题导致打包失败，

安装完成 npx webpack -v 查看版本

webpack打包都会有一个默认的配置文件，官方使用的是webpack.config.js 但是这个也可以更改

使用 npx webpack --config 要使用的配置文件名字.js

const path = require('path')
module.exports = {
    mode: 'development', // 或者production 两者区别打包的bundle.js文件是否被压缩
    entry: {
      main: './src/index.js'
    }
    entry: './src/index.js', // 简写
    output: {
       filename: 'bundle.js',
       path: path.resolve(__dirname, 'dist') // 不写也是默认这个文件夹
    }
}

执行命令 npx webpack

如果不想执行这个命令，可以在 webpack script中修改配置 package.json中

然后执行 npm run bundle ,就可以打包