必备神器：webpack使用入门

double

发布于 2019-10-22 16:27:21

5390

发布于 2019-10-22 16:27:21

文章被收录于专栏：算法channel算法channel

「Python与算法社区」第 309 篇原创

昨天，写了入门javascript的一篇文章：这是我的10分钟 js 入门笔记，老铁给我们的建议，js非常有用，具体请看下面：

初识webpack

webpack把所有文件都看做模块，webpack会理清所有文件之间的引用关系，然后打包到一起。

可以把webpack看做java,c++编译器，我们抽象不同功能到不同的文件，文件之前相互引用，但是编译器依旧能够将所有文件关系理清并编译成二进制文件。我们只需要把精力放到业务实现。同理，你可以把功能抽象到不同的JS文件中，使用ES6,ES5等，作为开发语言，webpack都能够将你的js文件编译打包成，任何浏览器都能够支持的js文件。

为什么要使用webpack?

随着前端不断发展，前端功能、逻辑越来越复杂，需要引入工程化思维来管理前端项目。
js插件越来越来，每实现一个功能都要去相应的网站下载并引用到html页面中，页面非常臃肿，而且好要梳理好插件之间的依赖前后关系，使用webpack结合npm，自动下载功能插件并附带相应的依赖包。

模块化在之前就有过相关的插件，commonjs,requriejs,这些插件都可支持模块化开发。可以说这是前端发展的一个过程，从同步模块化开发，到AMD异步模块化开发，到webpack支持同步，异步，模块化，打包等。

webpack主要的概念

Entry :项目的主要入口，也是一个js模块文件，相当于其他开发语言中的Main 函数，webpack通过这entry point file 找到所有与它有直接或者间接联系的模块文件。
Output: webpack编译打包后的输出口，默认情况下输出./dist/main.js，可以根据需求自己定义
loaders:默认情况下，webpack只能够识别javascript与Json文件。使用loaders可以将css样式文件也一起打包成束。ES6已经逐渐成为前端javascript标准，但是依旧有些浏览器不支持ES6,通过loaders可以将ES6转成ES5。
Plugins:可以说是对loaders的补充，它提供了更多的解决方案，比如将webpack打包的束最小化与优化
Mode:一共有三种， development ,production ,none;之间的区别可以查看：Model configuration page.

webpack实践

npm是一个js包管理器，主要功能跟Java的Maven或者Python的pip比较像，这里不做主要介绍。

mkdir webpack_learn
cd webpack_learn 
npm init -y

(base) ➜  webpack_learn npm init -y
Wrote to /Users/penzhu/Desktop/webpack_learn/package.json:

{
  "name": "webpack_learn",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9"
  },
  "dependencies": {},
  "description": ""
}

webpack可以安装到本地或者全局，这里将webpack安装到本地。

npm install webpack webpack-cli --save-dev

后面npm下载的包，都会在node_models文件夹下。

将webpack简单的运行命令，添加到npm中,打开package.json,修改scripts部分如下：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
},

配置成功后，就可以直接用npm run dev or build来执行webpack命令。

在src文件夹下新建一个index.js文件

添加下面内容

alert("Hi , Welcome to learn webpack")

注意：index.js文件名称是webpack默认的entry文件，如果需要自定义需要配置webpack.config.js文件

执行命令

(base)  npm run dev                               

> webpack_learn@1.0.0 dev /Users/penzhu/Desktop/webpack_learn
> webpack --mode development

Hash: 59b7b1c9078eca56d3d6
Version: webpack 4.41.2
Time: 58ms
Built at: 10/17/2019 10:45:10 AM
  Asset      Size  Chunks             Chunk Names
main.js  3.81 KiB    main  [emitted]  main
Entrypoint main = main.js
[./src/index.js] 38 bytes {main} [built]
(base) ➜  src

(base) ➜  webpack_learn ll
total 304
drwxr-xr-x    8 penzhu  staff     256 Oct 17 10:45 ./
drwx------+  33 penzhu  staff    1056 Oct 17 08:36 ../
-rw-r--r--@   1 penzhu  staff    6148 Oct 17 10:32 .DS_Store
drwxr-xr-x    3 penzhu  staff      96 Oct 17 10:45 dist/
drwxr-xr-x  317 penzhu  staff   10144 Oct 17 10:27 node_modules/
-rw-r--r--@   1 penzhu  staff  143136 Oct 17 10:27 package-lock.json
-rw-r--r--@   1 penzhu  staff     392 Oct 17 10:37 package.json
drwxr-xr-x    3 penzhu  staff      96 Oct 17 10:37 src/

(base) ➜  webpack_learn ls dist 
main.js

查看打包编译后的main.js内容

/***/ "./src/index.js":
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/*! no static exports found */
/***/ (function(module, exports) {

eval("alert(\"Hi , Welcome to learn webpack\")\n\n//# sourceURL=webpack:///./src/index.js?");

/***/ })

/******/ });

在输出目录./dist 下，新建一个index.html文件来引用mian.js看一下效果。

<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

使用npm+webpack 引入echarts

(base) ➜  webpack_learn npm install echarts                                              
npm WARN webpack_learn@1.0.0 No description
npm WARN webpack_learn@1.0.0 No repository field.

+ echarts@4.4.0
added 2 packages and audited 6791 packages in 4.297s
found 0 vulnerabilities

新建一个bar.js组件

var echarts = require('echarts');

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    myChart.setOption({
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });

修改重命名index.js为app.js

alert("Hi , Welcome to learn webpack")
import "./bar"

新建webpack.config.js

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

(base) ➜  webpack_learn npm run dev 

> webpack_learn@1.0.0 dev /Users/penzhu/Desktop/webpack_learn
> webpack --mode development

Hash: e5c6e0df67e1871d303e
Version: webpack 4.41.2
Time: 2461ms
Built at: 10/17/2019 2:57:25 PM
         Asset      Size  Chunks             Chunk Names
main.bundle.js  8.34 MiB    main  [emitted]  main
Entrypoint main = main.bundle.js
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
[./src/app.js] 162 bytes {main} [built]
[./src/component.js] 222 bytes {main} [built]
[./src/line.js] 449 bytes {main} [built]
    + 495 hidden modules

在浏览器中查看