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不是内部命令的问题 }; 12345678910

package.json需要添加的scripts属性

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

解决的问题

安装webpack

打包js，json文件

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

自动打包，热加载

插件