webpack-基本使用

时间 2019-12-08

标签 webpack 基本使用繁體版

原文原文链接

webpack 是一个现JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会分析你的项目结构，递归地构建一个依赖关系图(dependency graph)，其中包含应用程序须要的每一个模块，而后将全部这些模块按照指定的规则打包成一个或多个 bundle，过程当中能够经过配置把一些浏览器不能直接运行的拓展语言（scss，typescript等）转换为合适的格式。javascript

webpack处理模块化js

webpack 用于编译 JavaScript 模块。一旦完成安装，你就能够经过 webpack 的 CLI 或 API 与其配合交互。css

准备工做

新建demo文件夹，npm init初始化项目，局部安装webpack。html

`项目的基本结构`

一般会在项目的根目录创建两个文件夹，分别为src文件夹和dist(或build)文件夹java

src文件夹：用来存放咱们编写的javascript代码，能够简单的理解为用JavaScript编写的模块。
dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。

`使用webpack的基本文件`

<!-- 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="bundle.js"></script>
  </body>
</html>

//  src/Greeter.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

//  src/main.js 
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());

使用webpack的方式

1.终端中使用node

# {extry file}处填写入口文件的路径
# {destination for bundled file}处填写打包文件的存放路径
webpack {entry file} {destination for bundled file}

若是webpack不是全局安装的，那么当你在终端中使用此命令时，须要额外指定其在node_modules中的地址webpack

# webpack非全局安装的状况
node_modules/.bin/webpack src/main.js dist/bundle.js

命令执行成功后，会在dist目录下出现bundle.js文件，index.html就能够在浏览器中预览结果了。web

2.经过配置文件来使用Webpacktypescript

根目录下建立webpack.config.js, 配置entry、output，终端中使用时能够不用每次都手动添加。npm

const path = require('path');

module.exports = {
  entry:  __dirname + "/src/main.js", //已屡次说起的惟一入口文件
  output: {
    path: __dirname + "/dist", //打包后的文件存放的地方
    filename: "bundle.js" //打包后输出文件的文件名
  }
}

webpack 或

webpack --config webpack.config.js

注：json

“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。

文件中path也能够这样写path: path.resolve(__dirname,'dist'), 注意须要引入‘path’, path.resolve(__dirname,'dist')获取了项目的绝对路径

非全局需使用node_modules/.bin/webpack

若是 webpack.config.js 存在，则 webpack 命令将默认选择使用它，终端命令能够不明确指出，若是命名为其余名字，须要--config xxx指明但愿使用的配置文件。

3.npm 脚本

一般webpack推荐局部安装，所以在命令行中输入命令相似于node_modules/.bin/webpack这样的路径比较麻烦，能够在package.json中对scripts对象进行相关设置便可，设置方法以下

{
    ...
    "scripts": {
        "start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除
    },
    ...
}

为何能够直接写webpack，而不须要写路径，详见 webpack安装踩坑中关于npm 脚本原理的内容。

运行

npm run start 或

npm start

//除了几个默认的命令，如start等，run不能够省略。

webpack的基本使用就完成了……

其余方式处理相互依赖的js

1.使用古老的js引入方式去管理 JavaScript 项目

<!-- 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="greet.js"></script>
    <script src="main.js"></script>
  </body>
</html>

// greet.js
function greeter() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

// main.js
document.querySelector("#root").appendChild(greeter());

会有一些问题：

没法当即体现，脚本的执行依赖于外部扩展库(external library)。
若是依赖不存在，或者引入顺序错误，应用程序将没法正常运行。
若是依赖被引入可是并无使用，浏览器将被迫下载无用代码。

2.模块化方式

CMD规范的seaJS
AMD规范的requireJS
browserify
ES2015 中的 import 和 export 语句已经被标准化（大多数浏览器还没法支持它们）