webpack学习笔记（一）
2017-12-12 本文已影响4人
George吴逸云
本文参考学习文章[https://doc.webpack-china.org/guides/getting-started/#-]
起步
- 初始化项目文件 ：
npm init
- 本地安装webpack (如果系统未全局安装webpack，可使用)：
npm install --save-dev webpack
- 新建文件index.html，src/indexl.js,dist(文件夹)这时文件目录如下：
微信截图_20171212173234.png
<!DOCTYPE html>
<html>
<head>
<title>Hello Webpack</title>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
index.js
function component() {
var element = document.createElement('div');
element.textContent ="Hello webpack";
return element;
}
document.body.appendChild(component());
到目前为止一切都很正常是吧！没错，精彩正式开始
更改index.html中的js引用，改为这样的：
<script src="./dist/bundle.js"></script>
先别着急问，bundle.js是个什么鬼，紧接着在命令行执行一条命令：
webpack src/index.js dist/bundle.js
当出现以下命令
运行webpack.png
这时打开dist文件夹后，发现多了一个东东：
微信截图_20171212174650.png
这是在浏览器中打开HTML，应该可以看到这样一行字：“Hello webpack”
这个dist到底是什么意思呢，我引用了参考博客里的一句话：
，将“源”代码(/src)从我们的“分发”代码(/dist)中分离出来。“源”代码是用于书写和编辑的代码。“分发”代码是构建过程产生的代码最小化和优化后的“输出”目录，最终将在浏览器中加载
到此为止，还是有一点小小的成就感的！但是回头一想，每次都这么敲，好麻烦，好弱智哦，有没有更加简便的方式呢？
使用配置文件
- 根目录下新建一个webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
}
};
这个时候再键入命令：
webpack --config webpack.config.js
这时候发现dist里面同样会生成bundle.js，打开浏览器后发现效果是一样的。
