专栏首页算法channel必备神器:webpack使用入门

必备神器:webpack使用入门

「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

在浏览器中查看

本文分享自微信公众号 - Python与机器学习算法频道(alg-channel),作者:zhupc

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 模型评估指标AUC和ROC,这是我看到的最透彻的讲解

    blog.csdn.net/liweibin1994/article/details/79462554

    double
  • Python这五个坑,怎么避开?

    今天,跟大家探讨几个Python比较常见的坑点,希望对大家有所帮助。文末点击阅读原文,了解更多坑点。

    double
  • Python解惑之对象可变与不可变

    面向对象的语言,普遍存在的一个问题就是对象的可变(mutable),与对象的不可变(immuatable)。它是重要的,理解这个概念对于我们认识面向对象,避免掉...

    double
  • webpack 热更新(HMR)实现原理

    HMR(Hot Module Replacement)是webpack一个重要的特性,当代码文件修改并保存之后,webapck通过watch监听到文件发生变化,...

    伯爵
  • Webpack 代码分离

    Webpack 代码分离 ? 提示: 1、版本问题 本文基于 webpack 2.x 版本。webpack 2.x 相比 webpack 1.x 有重大...

    静默虚空
  • 也来说说webpack

    在CLI模式中,第一个参数是入口文件,第二个参数是输出文件,并读取当前cwd目录下面的webpack.config.js配置,根据配置生成对应的bundle.j...

    libo1106
  • webpack4.0各个击破(10)—— Integration篇

    webpack在工具链中的角色定位是非常清晰的,那么为了与其他流程进行合作,就需要使用任务管理工具来启动webpack,本文介绍两种常见的方法。

    大史不说话
  • webpack 中版本兼容性问题错误总结

    一定不要运行npm i  XXX  -g(-d) 一定要指定版本,尽量低版本,也不最新版本,会导致不兼容和指令不一样的问题。

    李文杨
  • 【先行者】webpack学习笔记(节选)

    在打包的时候,输入 webpack --model=development或production,

    web前端教室
  • webpack安装异常

    webpack中文指南:https://zhaoda.net/webpack-handbook/index.html

    Dawnzhang

扫码关注云+社区

领取腾讯云代金券