前言：本文只是小白入门文，不对的地方多多指教（好人一生平安，么么哒）
准备工作
1、首先你得了解这几个东西。
当然是webpack官方文档啦。
还有这个东西react官方文档
还有这个ES6文档
最后你还可以了解一下less的用法
2、接下来就可以开工咯
当然你的首先保证你的node +npm 一系列东西可用，这个本猿概不保证。
（1）首先来打开你的黑窗口（表示你是一个合格的程序员）
//（以下win为准）
// 这块是创建一个文件夹
mkdir webpack-demo
cd webpack-demo
// 创建一个npm 工程 而且不需要回车 回车 ...
npm init -y
（2）接下来就到了正题了
// 以下，你可以用npm,cnpm,yarn ...都是阔以滴，基于个人情况 哪个快搞哪个
// 开始安装我们的主题(当然不是色系 字体)
npm install --save-dev webpack
// 当然现在你要玩webpack 你需要下面这行命令
npm install --save-dev webpack-cli
ok，到这里你的webpack准备好了，接下来就该给他配置一点东西，方便你知道在哪里写自己的代码
这时候我的懒癌发作了，直接贴图
// 添加 webpack-demo/dist/index.html
<!doctype html>
<html>
<head>
<title>起步</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
// 添加 webpack-demo/src/index.js
//这块可以暂时不写 如果你想看点东西的话，我把webpack官网东西粘过来（不要骂我，毕竟我改了一点东西）
function component() {
const element = document.createElement('div');
element.innerHTML = 'hello,handsome boy/beautiful girl';
return element;
}
document.body.appendChild(component());
// 这块就是我们玩webpack的场所咯 webpack-demo/webpack.config.js
// 当然这块可以不叫这个名字本文暂不提及
const path = require('path');
module.exports = {
mode: 'development', //development 或者 production （你要选择的模式）
entry: './src/index.js', // 入口
output: { // 出口
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
如果你想要看见你写的hello咋显示你操作一下下面的步骤
// webpack-demo/package.json
scripts:{
"build": "webpack"
}
// 然后执行npm run build 去dist中打开你的html文件
没问题的话 应该就可以看到咯，这时候你应该会想，我看别人的工程都是跑个命令行直接浏览器就直接打开页面，我现在这么做是不是有点蠢，别急，马上就到了
// 这块我们添加一个自动编译代码的工具 webpack-dev-server
npm install --save-dev webpack-dev-server
// webpack-demo/webpack.config.js
const path = require('path');
module.exports = {
mode: 'development', //development 或者 production （你要选择的模式）
entry: './src/index.js', // 入口
output: { // 出口
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
devServer:{
contentBase: './dist'
}
};
还有一步
// webpack-demo/package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --open" //这块--open阔以帮我们直接打开在浏览器中打开文件
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
}
}
这样你想要的效果就达成啦 （3）我们来给webpack加点货：plugins
// 这一块 我们先来试试打包
// 安装插件html-webpack-plugin
npm install --save-dev html-webpack-plugin
//修改 webpack-demo/webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development', //development 或者 production （你要选择的模式）
entry: './src/index.js', // 入口
output: { // 出口
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
title: 'Surprise'
})
],
devServer:{
contentBase: './dist'
}
};
当然，如果你想要看这个东西干嘛了，你阔以在执行命令之前
// 改变 webpack-demo/dist/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
+ <title>test</title>
</head>
<body>
<script type="text/javascript" src="main.js"></script></body>
</html>
然后执行 npm run build 这时候你就可以看到效果了
此处暂不拓展HtmlWebpackPlugin 可以关注其他文章了解一哈HtmlWebpackPlugin
点这里HtmlWebpackPlugin可以自行了解，或者关注我后续文章
注意： 这时候关于html的问题还没完 因为你每次打包留下的文件会存在于dist中
// 添加这个插件在每次构建前清理 /dist 文件夹
npm install clean-webpack-plugin --save-dev
// 这时候你的webpack-demo/webpack.config.js 就变成了这样
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
mode: 'development', //development 或者 production （你要选择的模式）
entry: './src/index.js', // 入口
output: { // 出口
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
devServer:{
contentBase: './dist'
}
};
这时候解释一句,按照官方文档可能会爆炸，注意写法和用法，关于原因，后面有机会解释
