webpack学习笔记（一）

本文参考学习文章[https://doc.webpack-china.org/guides/getting-started/#-]

起步

1. 初始化项目文件 ：

npm init

2. 本地安装webpack (如果系统未全局安装webpack，可使用)：

npm  install --save-dev webpack

3. 新建文件index.html，src/indexl.js,dist(文件夹)这时文件目录如下：

微信截图_20171212173234.png

index.js

function component() {
    var element = document.createElement('div');
    element.textContent ="Hello webpack";
    return element;
}
document.body.appendChild(component());

到目前为止一切都很正常是吧！没错，精彩正式开始
更改index.html中的js引用，改为这样的：

先别着急问，bundle.js是个什么鬼，紧接着在命令行执行一条命令：

webpack src/index.js dist/bundle.js

当出现以下命令

运行webpack.png

这时打开dist文件夹后，发现多了一个东东：

微信截图_20171212174650.png

这是在浏览器中打开HTML，应该可以看到这样一行字：“Hello webpack”
这个dist到底是什么意思呢，我引用了参考博客里的一句话：

，将“源”代码(/src)从我们的“分发”代码(/dist)中分离出来。“源”代码是用于书写和编辑的代码。“分发”代码是构建过程产生的代码最小化和优化后的“输出”目录，最终将在浏览器中加载

到此为止，还是有一点小小的成就感的！但是回头一想，每次都这么敲，好麻烦，好弱智哦，有没有更加简便的方式呢？

使用配置文件

1. 根目录下新建一个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，打开浏览器后发现效果是一样的。