webpack-demo(4.29.6)

安装NodeJS，cnpm
NodeJS安装不消说，直接下载安装。
cnpm是npm的国内镜像，淘宝的。
npm用法不在此说明。
```
npm install cnpm -g
```
创建项目
```
mkdir webpack-demo & cd webpack-demo
npm init -y
```
此操作创建webpack-demo目录,进入并初始化一个node项目，在该目录下生成package.json文件。
第一个命令的-y选项表示快速初始化项目，不加的话要手动录入项目名、描述等信息，这些信息都会写到package.json里。
安装webpack
```
cnpm install webpack webpack-cli webpack-dev-server --save-dev
```
此操作在当前项目下安装webpack、webpack-cli、webpack-dev-server，存放在node_modules文件夹下，并在package.json文件中新增devDependencies信息。
编写业务代码
以下是来自网络的一个例子：
创建webpack-demo/dist/index.html
```

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src="main.js"></script>
  </body>
</html>
```
创建webpack-demo/src/index.js
```
//index.js 
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());
```
创建webpack-demo/src/index.js
```
// Greeter.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};
```
其中，src与dist目录名，输入文件index.js、输出文件main.js是webpack默认的名字，当然，可以配置。
在webpack-demo下使用webpack打包：
```
webpack
或
webpack src/index.js -o dist/main.js
```
由于使用了默认的目录和文件名，所以使用webpack命令就可以打包，也可以手动指明输入输出文件。
这样打包的话，不管哪个命令在下面都会输出一条警告信息。大体意思是没有指定打包模式，默认使用了production模式。
打包模式有三种可选：development、production、none，分别是开发、生产、无。
development模式不对代码进行压缩，而是放在eval里。
production模式会对代码进行压缩。
none模式基本只是将文件进行连接与闭包。
指明模式，只要在命令最后加上–mode development即可
```
webpack --mode development
或
webpack src/index.js -o dist/main.js --mode development
```
查看效果
浏览器打开dist/index.html即可看到效果
webpack-dev-server的使用
在package.json的scripts里新增dev与build属性：
```
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack-dev-server --inline --hot --progress --content-base ./dist",
  "build": "webpack --mode production --progress"
}
```
webpack-dev-server将打包的输出放在内存中而不是文件，并且集成了express容器，将以服务器的形式提供开发调试。
inline选项为整个页面添加了"Live Reloading"功能，而hot选项开启了"Hot Module Reloading"功能，能够实现修改js代码后不需要重新打包，且不需要刷新页面就自动重载的功能。至于二者的区别，估计是inline重载的是整个页面而hot能精确到某个具体模块。我看前端一般用inline就够了。
另外，webpack本身也提供–watch选项以支持热部署，但据说项目大了响应慢。
pregress选项输出打包过程。
content-base选项指明服务的根目录。
配置完成之后，可以在webpack-demo目录下使用npm命令运行脚本：
```
npm run dev
或
npm run build
```
默认地址：http://localhost:8080/

webpack配置文件
webpack有一堆的东西可以配置与预处理，这里只是做个引入。
新建webpack-demo/build/webpack.dev.conf.js

//webpack.dev.conf.js
const path = require('path');

module.exports = {
     entry: './src/index.js',
     output: {
          path: path.resolve('./dist'),
          filename: 'main.js'
     }
}

修改package.json：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack-dev-server --inline --progress --content-base ./dist --config build/webpack.dev.conf.js",
  "build": "webpack --mode production --progress --config build/webpack.dev.conf.js"
}

运行开发模式：

npm run dev

访问：http://localhost:8080/

猜你喜欢