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

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文件中，所以看不到

自动打包，热加载

• 安装webpack-dev-server依赖
• npm install --save-dev webpack-dev-server：服务器
• 配置参数
• 运行
• 测试热加载
• 退出服务器直接快捷键【ctrl+C】即可

插件

• 下载需要的插件
• 配置
• 以上就是插件用法，所有插件都走不出这两步