webpack基础入门2018-11-07

第一步：

我们需要安装npm，这个只要你有NodeJS运行环境的肯定会有的；这边这个块也就不作叙述

第二步：

我们接下来会选择在项目目录中进行所有的安装和操作，不去选择全局安装；

在电脑任意盘中新建一个项目文件夹，如：test

接下来我们通过cmd进入到这个项目文件夹下，并输入执行npm init，回车，进行初始化：
对于package name之类的配置项，我们完全选择直接回车，到底！
到这一步，就OK了！

此时我们的项目文件夹里就多了一个文件：package.json

第三步：

既然要使用webpack进行打包，那么我们就要来安装webpack了，起初我们就说过都在项目文件夹里完成，不做全局安装；那么接下来输入npm install --save-dev webpack，回车进行安装：
此时我们的项目文件夹，已经又多了一个文件夹和一个json文件：

image.png

第四步：

我们现在可以开始写自己的项目了，那么我这边也就按通常各位大牛分享的例子来写，首先，在项目文件夹下，新建两个文件加src和public,还有一个dist目录存放打包后的文件；

src文件夹中写入world.js和main.js；public文件夹中写入index.html；

index.html

main.js

require('./world.js');
function hello(str) {
    document.write(str);
}
hello(' Hello Everyone!');

world.js

document.write('Hello xxxx!');

第五步：

按道理，现在已经可以进行打包处理了，最后的结果就是将main.js作为主入口进行操作，最后在dist文件夹中生成一个打包OK之后的文件：bundle.js；然后我们打开index.html文件就会在页面显示我们刚才的那句话了；

但是，忽略了一个问题，那就是我们的配置文件怎么办呢？都在命令行去操作吗？这肯定是很麻烦且不赞成的，那么我们就在项目目录下再建一个文件：webpack.config.js，在里面写入配置文件：

module.exports = {
  entry:  __dirname + "/src/main.js",//入口文件
  output: {
    path: __dirname + "/dist",//打包后的文件存放目录
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

这样我们就可以通过node_modules/.bin/webpack开始运行了；

第六步：
在package.json配置文件的script选项中添加如下代码

    "dev": "webpack --mode development",
    "build": "webpack --mode production"

image.png

第七步：
当运行 npm run dev命令时，就会调用webpack.config.js配置文件中的入口文件和生成文件的路径，等价于
node_modules/.bin/webpack src/main.js dist/bundle.js --mode development

第八步：
在index.html中调用dist/bundle.js文件，在浏览器中运行访问