手把手超详细webpack基础入门（一）

一、基本安装

1.选一个文件夹。

2.命令行npm init(没有安装node和npm的请先自行搜索安装） ，生成package.json。

3.创建项目结构。一般包含：src(源文件夹)、dist(用webpack构建之后的输出文件夹)、webpack.develop.config.js(webpack开发环境下的配置文件）、webpack.publish.config.js（webpack发布时的配置文件）。

-dist
-src
webpack.develop.config.js
webpack.publish.config.js

4.全局安装webpack。在任一地方打开命令行窗口，运行 npm install webpack -g。

5.项目本地安装webpack。在项目所在文件夹命令行运行 npm install webpack -save-dev（开发依赖）。

npm5以后，会自动生成一个package-lock.json文件，这个文件是npm的一个优化，带来的潜在坑是：以后直接改 package.json 文件相应模块的版本号，再执行npm install不会更新了，你只能手动用npm install xxx@yy指定版本号来安装，然后它会自动更新 package-lock.json 文件。

二、起个HelloWorld玩玩

1.在src中新建一个index.html文件，一个js文件夹，在js文件夹中建一个app.js文件（入口文件）。

2.在index.html中写一个id为app的div，在app.js中写一个document.getElementById("app").innerHTML="Hello World"。

3.在index.html中的script中的src引入app.js。

4.在webpack.develop.config.js的配置文件中写入如下代码：

// entry：入口文件
// output：输出文件

var path = require('path');module.exports = {    entry:path.resolve(__dirname,'src/js/app.js'),     output: {        path: path.resolve(__dirname, 'dist'),        filename: 'bundle.js',    },}

5.构建。刚才我们全局安装了webpack，通过webpack -h可查看所有webpack命令。这时候构建项目我们可通过在项目根目录命令行直接敲入webpack运行项目，默认会去查找名称为webpack.config.js的文件执行。但是我们咩有这个文件，所以要改一下构建指向，通过命令行指令webpack –-config webpack.develop.config.js，然后回车，会发现dist文件夹中多了一个bundle.js文件，此时编译成功

6.最后一步：将index.html复制一份到deploy文件夹去，将script的引用改为bundle.js。将此index.html在浏览器中打开，HelloWorld出现啦！

三、webpack命令配置

在上述的步骤中，你会不会发现如果我们每次构建项目都要输入webpack –-config webpack.develop.config.js，是不是很麻烦，很长，所以接下来就可以将这个命令改造一下。
改造的地方在package.json文件中。package.json中有一个字段是scripts，这个字段是npm为我们提供的配置执行命令的方法。scripts为一个对象，里面的键值对，键是将来在命令行打出的npm命令，值是此npm命令具体对应的命令。
那我们就刚才那句命令简化为：dev

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --config webpack.develop.config.js",
  },

此时，我们就只需要输入 npm run dev就可以构建了。

更多内容请查看我的文章《手把手超详细webpack基础入门（二）》。