webpack使用配置

webpack是什么

   WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
   现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法
   模块化，让我们可以把复杂的程序细化为小的文件;
   类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；
   Scss，less等CSS预处理器
   ...
   这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。

准备工作
1.建立一个新的文件夹，
终端执行
//全局安装
npm install -g webpack
//安装到你的项目目录
npm install –save-dev webpack
2.npm init
自动创建package.json，这是一个标准的npm说明文件，其中包含当前项目的依赖模块，自定义的脚本任务等。
3.npm install –save-dev webpack
安装Webpack
4.在空文件夹里面新建app文件夹和public文件夹，app文件夹存放原始数据和javascript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）
创建
index.html –放在public文件夹中;
Greeter.js– 放在app文件夹中;
main.js– 放在app文件夹中;

index.html

<!-- 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>

Greeter.js

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

main.js

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

webpack使用方法

一基本的使用方法

在终端中：

//webpack非全局安装的情况
node_modules/.bin/webpack app/main.js public/bundle.js

此时：webpack同时编译了main.js 和Greeter,js,现在打开index.html，则成功的使用Webpack打包了一个文件了。

二通过配置文件来使用webpack

在当前根目录下新建一个webpack.config.js文件

module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

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

再打包文件只需在终端运行webpack命令就可以，这条命令会自动引用webpack.config.js文件中的配置选项。

三更快捷的打包方式

package.json

{
  "name": "webpack-sample-project",
  "version": "1.0.0",
  "description": "Sample webpack project",
  "scripts": {
    "start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除
  },
  "author": "zhang",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^1.12.9"
  }
}

在命令行运行 npm start就可以打包文件

Loaders

通过不同的loader,webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，对于react而言，合适的loader可以将jsx文件转换成js文件。

Babel

Babel其实是一个编译JavaScript的平台,目的:
·使用下一代的JavaScript代码（ES6，ES7…），即使这些标准目前并未被当前的浏览器完全的支持；
·使用基于JavaScript进行了拓展的语言，比如React的JSX；

#

Webpack有一个不可不说的优点，它把所有的文件都都当做模块处理，JavaScript代码，CSS和fonts以及图片等等通过合适的loader都可以被处理。

webpack是什么

Loaders

Babel

#

猜你喜欢