webpack超简易入门安装

webpack是当今很火的打包构建工具，包含了大部分主流html，css，图片处理框架，可以进行预编译语言的处理，代码的压缩功能等等，废话不多说，进入正题。

您需要先学习/配置以下内容

nodejs安装:http://www.runoob.com/nodejs/...
nodejs镜像配置:http://cnodejs.org/topic/4f99...
node模块化的文章:http://www.cnblogs.com/Leo_wl...

ps : 为各位大佬奉上github地址：https://github.com/YexChen/we...

安装webpack

基本环境配置

运行以下指令，初始化项目：

npm init

以上安装一路回车即可，接下来安装全局和局部的webpack：
-g为全局安装，方便我们用命令行指令，
-D为在开发环境的安装

npm i -g webpack
npm i -D webpack

基本项目构建

接下来，开始构建我们的项目吧，先创建几个基本的文件:

app.js
index.html
module.js

app.js--webpack运行的入口程序
index.html--本示例中的网页文件
module.js--一个js模组

修改入口程序

修改module.js为：

export default function(){
  document.write("module.js has been modified");
}
在这里，我们通过export暴露了一个方法，在app.js里面我们会调用这个方法。

修改app.js为:

import module from "./module"

document.write("app.js has been add");

module();

app.js里我们通过import方法导入了module.js中的包,并把module作为module.js中暴露出的函数。

最后，让我们修改index.html,直接复制粘贴即可：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script src="./dist/bundle.js"></script>
</body>
</html>

也只是调用了一下dist目录下的bundle.js而已

我们此时的目录结构应该为：

.
|-- app.js
|-- index.html
|-- module.js
|-- node_modules
|-- package-lock.json
`-- package.json

那么，让我们运行一下吧，如果安装了全局webpack的话我们可以运行：

webpack app.js dist/bundle.js

如果没有全局webpack的话我们可以运行：

./node_modules/.bin/webpack app.js dist/bundle.js

执行完毕后打开index.html(双击),如果看到打印出内容为

app.js has been addmodule.js has been modified

那么恭喜你，第一步成功了

设置webpack配置文件

一直使用命令行很麻烦吧？webpack早就想到了这一点，webpack.config.js就是为此而生的

让我们新建一个webpack.config.js文件，并设置内容为：

const path = require("path");

module.exports = {
  entry : "./app.js",
  output : {
    path : path.join(__dirname,"dist"),
    filename : "bundle.js"
  }
}

entry : 文件入口
output : 输出口

此时直接运行

webpack

或者

./node_modules/.bin/webpack

即可进行编译

webpack-dev-server

使用webpack-dev-server进行实时监听（监测代码改动）会让我们的工作变得更加容易。

先安装webpack-dev-server:

npm i -D webpack-dev-server

然后再回到我们的webpack.config.js文件，增加devServer项:

devServer : {
    port : 3000,
    publicPath : "/dist/"
  }

改动后的文件为：

const path = require("path");

module.exports = {
  entry : "./app.js",
  output : {
    path : path.join(__dirname,"dist"),
    filename : "bundle.js"
  },
  devServer : {
    port : 3000,
    publicPath : "/dist/"
  }
}

注意下publicPath为静态地址，因为在dist里面我们生成了一个bundle.js，所以需要加这个，让文件可以被访问

好的，配置已经完成了，接下来我们来运行一下

node_modules/.bin/webpack-dev-server

在浏览器中间访问localhost:3000,即可看到效果。此时我们的代码已经被监听，您可以改一下app.js或者module.js中的内容，文件会实时响应与编译。

webpack loader css样式表

有时候，我们需要加载样式表，在webpack中如何加入呢？

在根目录下创建index.css,修改内容如下：

html,body{
    background-color : yellowgreen
}

然后在app.js中添加如下代码：

import "./index.css"

app.js现在是这样的：

import module from "./module"
import "./index.css"

document.write("app.js has been addadsadas");

module();

然后打开网页，是不是报错啦？报错就对啦

在js文件中怎么能打开css文件呢？这时，就需要loader上场了

我们安装一下

npm i -D css-loader

安装完以后，我们还需要webpack知道我们安装了这个模块：
修改webpack.config.js:

const path = require("path");

module.exports = {
  entry : "./app.js",
  output : {
    path : path.join(__dirname,"dist"),
    filename : "bundle.js"
  },
  module : {
    loaders : [
      {
        test : /\.css$/,
        loader : "css-loader"
      }
    ]
  },
  devServer : {
    port : 3000,
    publicPath : "/dist/"
  }
}

然后再编译一下，现在错误消失了，但是文件好像并没有出来，这是为什么呢？
我们这里虽然使用了css-loader，但是并没有让页面用上去，所以现在还需要另外一个loader：style-loader

npm i -D style-loader

然后修改webpack.config.js:

const path = require("path");

module.exports = {
  entry : "./app.js",
  output : {
    path : path.join(__dirname,"dist"),
    filename : "bundle.js"
  },
  module : {
    loaders : [
      {
        test : /\.css$/,
        loader : "style-loader!css-loader"
      }
    ]
  },
  devServer : {
    port : 3000,
    publicPath : "/dist/"
  }

}

大家可能注意到了，loader中导入了两个loader，中间用！分割，webpack优先调用右边的，所以先运行css-loader处理文件，再运行style-loader

现在再次编译文件，看我们的主页背景是不是变成原谅色了呢？

webpack超简易入门安装

您需要先学习/配置以下内容

安装webpack

基本环境配置

基本项目构建

修改入口程序

设置webpack配置文件

webpack-dev-server

webpack loader css样式表

后续关于资源压缩和按需加载的内容正在更新

比那名居天子

引用和评论

[phaser3学习]使用phaser3做一款飞刀小游戏

webpack的入门教程

前端微服务跨域配置解决办法，devServer为例

开发自定义Taro插件解决跨平台难题

JS工程化集锦

macOS上HBuildX 开发 uni-app项目，运行调试时编辑保存文件不会自动编译更新页面

从零开始搭建 TS + webpack-dev-server 的开发环境