webpack （自己做个笔记而已，方便查看用法）

1、什么是webpack

Webpack是前端一个工具,可以让各个模块进行加载,预处理,再进行打包。现代的前端开发很多环境都依赖webpack构建，比如vue官方就推荐使用webpack。

2、简单使用下webpack

2.1、首先我在 c 盘下新建一个webpack-demo1的文件夹，然后命令行进入该目录，执行 npm init --yes 项目初始化，该命令会在文件下生成一个package.json文件，该命令也可以是 npm init ，这样的话它会询问你一系列诸如项目名称，项目描述，作者等信息，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，一路回车默认即可。package.json如下：

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

接下来在该环境中安装一下3.5.6版本webpack，命令 npm install [email protected] --save-dev,接下来再全局安装一下，npm install [email protected] -g,安装成功之后，package.json文件会出现webpack的版本信息：

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

实现打包功能：

打包一个js文件

在根目录下新建一个index.js，和index.html文件，index.js文件内容：

function say(){
    alert("hello webpack");
}
say();

输入命令：webpack index.js index.bundle.js,该命令含义：

# {extry file}出填写入口文件的路径，本文中就是上述main.js的路径，
# {destination for bundled file}处填写打包文件的存放路径
# 填写路径的时候不用添加{}
webpack {entry file} {destination for bundled file}

结果自动生成了一个 index.bundle.js 的文件，我们可以在index.html中引入，在浏览器中顺利弹出 “hello webpack”

打包多个文件：

在根目录下又新建一个calc.js文件，内容：

function add(a,b){
    return a+b;
}
module.exports = {    //导出这个模块
    add: add
}

把index.js文件内容更改：

var oCalc = require("./calc");   //引入模块
function say(){
    alert("hello webpack");
}
say();
alert(oCalc.add(10,20));    //使用该模块的功能

执行打包：webpack index.js index.bundle.js，成功后，打开index.html，弹出俩次 1、“hello webpack” 2、“30”

3、loader

loaders 用于转换应用程序的资源文件，他们是运行在nodejs下的函数

举个例子：

在根目录下新建一个index.js和一个index.html和一个style.css文件，

style.css

body{
    background-color: skyblue;
}

index.js

function say(){
    alert("hello webpack");
}
say();
require("./style.css");    //在js中引入style.css

打包：webpack index.js index.bundle.js，直接报错：

提示你可能需要loader来操作你的文件类型，

安装对应loader：npm install css-loader style-loader --save-dev,成功后在index.js中引入：

require( 'style-loader!css-loader!./style.css' );
function say(){
    alert("hello webpack");
}
say();

再次打包：webpack index.js index.bundle.js，这次打开index.html，发现页面背景已经变成了天蓝色。并且css是动态创建style引入的

webpack打包，后面可以跟很多参数：

--progress: 打包进度
--display-modules: 打包的模块
--colors: 是否彩色显示打包提示信息
--display-reasons: 打包原因
--watch: 自动监控文件变化

比如我使用 --watch：webpack index.js index.bundle.js --watch，这样的话会自动监测，只要与index.js相关的文件发生了变化，自动打包。

webpack （自己做个笔记而已，方便查看用法）

猜你喜欢