创建基本的 webpack 4.X 项目

创建基本的 webpack 4.X 项目

1. 运行 npm init -y 快速初始化项目。在项目生成package.json 文件。
2. 在项目根目录下创建 src源码目录和 dist 产品目录。
3. 在src目录下创建index.html 和 index.js 文件。
4. 使用cnpm安装webpack，运行cnpm i webpack webpack-cli -D
   • 全局运行 npm i cnpm -g
5. 在项目根目录创建webpack.config.js 文件。
6. webpack 4.X 提供了约定大于配置的概念，目的是为了尽量减少配置文件的体积。
   • 默认约定了：
   • 打包的入口是：src --> index.js
   • 打包的输出文件是 dist --> main.js

            7. cnpm i webpack-dev-server -D  配置依赖到本地，在package.json 文件中添加配置  "dev":“webpack-dev-server --open

                    webpack-dev-server  数据自动同步

                    --open 自动打开浏览器

                    --port  8080 指定端口号

                    --hot

                    --host 127.0.0.1 指定IP/域名

                    --progress

                    --compress  走网络时压缩数据 

局部安装webpack时,使用webpack命令时提示webpack不是内部命令解决方法

用一下国内的良心镜像。你会发现再执行 npm install webpack --save-dev 会很快的安装完毕。安装完成之后，你会发现，项目中多了一个 node_modules文件夹,里面有一个 .bin和webpack文件夹。

此时我们打开终端，输入 webpack会提示 webpak不是内部命令。不用怕，因为这个执行文件在你的项目node_modules\.bin

下面，只要将这个路径配入 环境变量的 path中去 ，就可以愉快的使用 webpack了！

npm run dev 时 提示 

'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序或批处理文件。

缺少相对应的插件帮助你运行程序。

解决办法：通过npm下载【开发服务器】插件， 命令：npm install webpack-dev-server --save

webpack-dev-server


'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.


npm ERR! A complete log of this run can be found in:
npm ERR!     D:\dev\nodejs\node_cache\_logs\2018-05-23T13_35_56_938Z-debug.log