webpack自动化构建工具详细笔记，入门到实战，解决 webpack : 无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称，和webpack : 无法加载文件等等

最新推荐文章于 2025-04-07 22:57:12 发布

ydenergy_殷志鹏

最新推荐文章于 2025-04-07 22:57:12 发布

阅读量1.7k

点赞数 4

分类专栏：前端文章标签： npm vue node.js webpack 前端

本文链接：https://blog.csdn.net/grd_java/article/details/105397169

版权

前端专栏收录该内容

18 篇文章

订阅专栏

webpack一个打包工具，除了HTML文件，其它例如js文件，css样式文件，它都认为是一个模块，它会将他们进行打包，将零碎的文件打包成完整模块

我这里的打包方式，比一般方式复杂一丢丢，是因为使用普通打包方式80%会报错，这里直接解决了问题，供日后查阅的命令是为了以后方便过来复制，解决的问题是为了让大家了解，为什么我要这么使用webpack，以免大家不理解，如果不想看可以直接从安装webpack看起

供日后查阅的命令

对于用npm引入依赖，推荐去官网引入
npm install --save-dev webpack-cli：4.0以上版本必须安装这个
npm install webpack -g 全局安装
npm install webpack --save-dev 局部安装
npm install css-loader style-loader --save-dev ：打包css需要
npm install file-loader url-loader --save-dev ：打包静态图片
npm install --save-dev webpack-dev-server：热加载服务器
npm run 名字局部运行webpack

webpack.config.js文件

  const path = require('path');//model内置模块用来去设置路径
  
  module.exports = {
    entry: './src/js/entry.js',//入口配置文件
    output: {//出口配置文件
      filename: 'bundle.js',//输出文件名
      path: path.resolve(__dirname, 'dist')//输出路径,__dirname表示根目录,dist表示输出文件夹
    },
    mode: 'production' // development   production,这一项是为了解决打包失败,webpack不是内部命令的问题
  };

package.json需要添加的scripts属性

  "scripts": {
  	    "test": "echo \"Error: no test specified\" && exit 1",
  	    "构建名，这里些什么 命令中 npm run 后面跟着的名字就是什么":"webpack"
  	  },

解决的问题

1、无法识别
解决办法
- 1、编写package.json，加入指定内容
- 2、编写webpack.config.js文件添加mode: ‘production’ 属性
- 3、使用局部命令运行webpack
问题2 webpack : 无法加载文件 C:\Users\dd\AppData\Roaming\npm\webpack.ps1，因为在此系统上禁止运行脚本
- 解决方法
  - 1、以管理员身份运行windows powershell
- 输入命令

安装webpack

1、新建一个测试用的目录，并添加package.json文件
2、下载安装
- npm install webpack -g 全局安装
- npm install webpack --save-dev 局部安装
- npm install --save-dev webpack-cli：如果是4.0,以上版本，必须安装这个

打包js，json文件

1、创建测试用目录结构
2、打开webpack官方文档
编写package.json文件
开始打包

打包css文件和图片等静态资源

需要npm安装的依赖
- npm install css-loader style-loader --save-dev ：打包css需要，这里一次引入了两个，打包css文件的css-loader和打包样式的style-loader，光打包css是不生效样式的，相要看见效果，必须有style-loader
- npm install file-loader url-loader --save-dev ：打包静态图片，file-loader用于打包文件，url-loader用于打包图片
- url-loader是对象file-loader的上层封装，使用时需要配合file-loader使用
1、使用功能npm安装依赖
2、创建css文件并引入entry.js文件
官网复制配置文件
测试是否引入成功
打包图片，创建文件夹放入图片
打包
测试
说明
- 如果你看不到你的图片打包到哪里去了，请查看你的图片是否大于8kb，因为小于8kb的图片会以字符串形式写在js文件中，所以看不到