初学webpack问题总结

最新推荐文章于 2024-03-27 18:00:26 发布

原创最新推荐文章于 2024-03-27 18:00:26 发布 · 658 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

总结笔记专栏收录该内容

6 篇文章

订阅专栏

本文介绍了Webpack的基本配置方法，包括设置入口文件、打包文件路径等，并提供了如何在package.json中配置Webpack的具体步骤。此外，还针对常见的TypeError: Cannot read property ‘entry’ of undefined错误进行了分析并给出了相应的解决方案。

1.打包文件路径 path路径问题
path路径必须使用绝对路径，windows下要写成 path.resolve(__dirname,’./dist/js/’)

var path = require('path');

module.exports = {
    //入口文件的路径
    entry:'./src/js/main.js',
    //打包文件的路径
    output:{
        //这里要这样写路径
        path:path.resolve(__dirname,'./dist/js/'),
        filename:'bundle.js'
    }
}

2.npm 文件 package.json中配置webpack
在scripts参数下添加webpack配置

"scripts": {
    //下面这段可以不管，是npm自己生成的
    "test": "echo \"Error: no test specified\" && exit 1",
    //下面这个是咱们得配置，key值是运行时的名字，比如  npm run webpack,名字是自定义的；
    //value值是要运行的模块  首先设定webpack运行的配置文件是这段webpack --config webpack.config.js
    // --xxx  是运行命令 
    "webpack": "webpack --config webpack.config.js --progress --display-modules --display-reasons --colors "
  }

3.TypeError: Cannot read property ‘entry’ of undefined出现的错误
因为在模板文件中手动引入了 js文件，所以就出现错误，只需要删除模板文件中的js即可
具体可参考点击这里查看问题