写在前面
本文只针对webpack4.x以上的配置使用，低版本考虑向下兼容问题，并不完全适用，希望我踩过的坑能给你节约开发时间。
一、全局安装webpack
在安装 Webpack 前，你本地环境需要支持 node.js。
npm 安装是真的龟速，建议使用淘宝的镜像及其命令 cnpm，也可以使用npm.
npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm
新建文件夹 webpack_cnpm，在文件中打开命令终端（快捷方式，进入文件夹，shift+鼠标右键出现在此处打开powershell窗口），使用 cnpm 全局安装 webpack。
cnpm install webpack -g //全局安装
低版本可以不用全局安装,但4.x以上你会哭😭，开始就是没有考虑版本的问题，折腾得老腰疼。
cnpm install -g webpack-cli //安装webpack-cli CLI（命令行工具）转移到了包webpack-cli中。
必须是全局安装，本地你会发现一堆错误出现，那就得卸载：npm uninstall webpack-cli
二、文件夹部署
文件夹 webpack_cnpm 中包含src、dist文件夹,webpack4.x以'./src/index.js'作为入口，输出路径是'./dist/main.js'，其中src目录即index.js文件需要手动创建，而dist目录及main.js会自动生成。如下为目录文件：
webpack_cnpm //webpack的模拟开发文件夹
| - webpack.config.js //配置webpack出入口、插件、loader
| - node_modules
| - dist //打包输出文件夹
| - src //开发资源文件夹
| - index.html /*html文件
| - index.js 入口文件
| - index.css css文件
| - index.scss scss文件
| - images 基础图片文件夹 */
| - img1.png
| - img2.png
index.html文件内容：
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="../dist/main.js" charset="utf-8"></script>
</body>
</html>
index.js文件内容:
document.write ('<h3 style="color:red;text-align:center">这世界很酷"</h3>');
webpack.config.js内容：
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: './dist/main.js'
}
};
三、使用webpack
使用命令：
webpack --mode development //或者 webpack
这样便能够实现将'./src/index.js'打包成'./dist/main.js'。在浏览器中打开index.html实现：
效果展示.png
每次执行都要输入这个命令webpack --mode development，非常麻烦，我们在package.json（在webpack_cnpm下输入npm init //项目的初始化,自动创建package.json文件）的scripts中加入：
"dev":"webpack --mode development",
"build":"webpack --mode production"
以后只需要在命令行：
执行npm run dev便相当于执行webpack --mode development，
执行npm run build便相当于执行webpack --mode production。
index.js文件修改内容:
index.js
我们在根目录执行：
npm run dev
dos dev
可以看到根目录下生成了dist目录，并且dist目录下生成了main.js文件，main.js文件已经打包了src目录下index.js文件的代码,实现效果：
实现效果
四、总结
注意事项：
1、webpack必须要全局安装，否则不能使用webpack指令；
2、webpack-cli必须要全局安装，否则不能使用webpack指令。
3、webpack4.x中webpack.config.js配置文件不是必须的。
4、默认入口文件是./src/index.js，默认输出文件./dist/main.js，其他报错无效。
5、不支持webpack 文件a 文件b的方式，如：webpack index.js bundle.js
6、node版本>8.9以上
使用步骤：
1、创建目录文件（项目）；
2、初始化工程目录：npm init。
3、全局安装webpack。
4、全局安装webpack-cli。
5、webpack --mode development/production进行打包，可在package.json中配置dev和build的脚本，便只需运行npm run dev/build，减少麻烦。
6、 执行webpack其他指令参数 在 webpack --mode development/production 后加上其他参数即可。
网友评论