webpack配置

webpack配置

1、原因

你是不是觉得每次打包都要输入一长串的东西太麻烦了
image
要是文件路径太长,那就太费时间了,还容易出错
所以我们需要对webpack进行配置,简化终端命令

2、步骤

1、在你的项目中再加一个webpack.config.js文件
image

webpack.config.js代码

const path = require('path');

module.exports = {
//入口:可以是字符串/数组/对象,这里我们入口只有一个,所以写一个字符串即可
  entry: './src/index.js',
//出口:通常是一个对象,里面至少包括俩个重要属性,path 和 filename
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')//注意:path 通常是一个绝对路径
  }
};

打包命令

webpack

这样就可以不用每次都写路径啦

2、在 package.json 添加一个 npm 脚本(npm script):
使用命令npm init初始化npm
根据指令一路按回车

image
image

然后自动生成了package.json文件

image

修改package.json文件

image

现在,可以使用 npm run build 命令,来替代我们之前使用的 webpack 命令

image

恭喜你webpack基础配置成功!!!

posted @ 2021-05-27 19:44  .爬行的蜗牛  阅读(63)  评论(0编辑  收藏  举报
Document