动手写webpack配置--1.学会安装运行(helloworld)

基于Webpack4.x + npm6.5 + node v10.10.0 + vscode环境.

项目名webpackDemo

开始步骤:找个路径新建个文件夹命名为webpackDemo,记得千万不要命名为webpack,因为这会和包冲突。

打开终端.或使用vscode打开webpackDemo 文件夹。新建一个终端.

1. cd 到 webpackDemo.

2. npm init -y 执行完成后会自动生成package.json的文件。

3. npm install -D webpack webpack-cli // 安装到开发依赖

安装完成后查看package.json

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3"
  }
}

4. 在vscode 中新建src文件夹。新建一个dist文件夹，在dist文件夹下新建一个index.html.在src 中建一个index.js文件。

在package.json的同级目录下建一个webpack.config.js。

5。最后目录如下:

6.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>webpack learn</title>
</head>

<body>
    <script src='./bundle.js'></script>
</body>

</html>

这里其实是个普通的html啦，只不过是引用了最后打包出来的bundle.js

7.index.js

function welcome_webpack() {
    return 'webpack hello world!';
}

const ret = welcome_webpack();
console.log(ret);

8. 先执行一个 node ./src/index.js

AdeMacBook-Pro-3:webpackdemo a$ npm start

> [email protected] start /Users/a/Documents/reactNative/reactstudy/webpackdemo
> node ./src/index.js

webpack hello world!

控制台输出webpack hello world! 说明js没有问题。

9.进行webpack.config.js的编写了，参考中文官方API：https://www.webpackjs.com

因为只有一个index.js进行打包。所以只需要写入口点文件和输出的打包文件就可以。

webpack.config.js

const path = require('path');

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

其中entry 为入口文件，如果有多个入口文件，参考API说明。

output为输出的最终打包文件，不管有多少个入口文件，输出的只有一个。并指定输也目录为dist。

10. 修改pageage.json中的script，因为这是最终npm 打包，运行，测试使用的脚本。

...
  "scripts": {
    "start": "node ./src/index.js",
    "dev": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
...

11.然后在vscode的终端中执行npm run dev

AdeMacBook-Pro-3:webpackdemo a$ npm run dev

> [email protected] dev /Users/a/Documents/reactNative/reactstudy/webpackdemo
> webpack

Hash: 987cca24b2115d4658eb
Version: webpack 4.29.6
Time: 85ms
Built at: 2019-03-01 23:10:34
    Asset      Size  Chunks             Chunk Names
bundle.js  3.89 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./src/index.js] 118 bytes {main} [built]

12.这时可以看到在dist目录下输出了一个bundle.js这个打包后的文件。这个文件正好是webpack.config.js中的output对象里指定的filename。然后打开这个dist 的目录下，使用chorme 打开html。然后按comman+option+i(这个是mac 下的快捷键)打开开发者开具。可以看到console里输出了。

OK。第一个最为基础的打包完成。

动手写webpack配置--1.学会安装运行(helloworld)

猜你喜欢