1.简介
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。
2.安装
cnpm install webpack -g
3.使用
- 没有引用js 之外的文件
runoob1.js 文件:
document.write(require("./runoob2.js"));
runoob2.js 文件:
module.exports = "It works from runoob2.js.";
webpack runoob1.js bundle.js
执行以上命令会编译 runoob1.js 文件并生成bundle.js 文件,html直接引用bundle.js 文件即可。
- 引用了js之外的文件(比如css要用到loader)
runoob1.js 文件:
require("./style.css");
document.write(require("./runoob2.js"));
npm install css-loader style-loader
执行以上命令后,会再当前目录生成 node_modules 目录,它就是 css-loader 和 style-loader 的安装目录
webpack runoob1.js bundle.js --module-bind 'css=style-loader!css-loader'
4.使用配置文件
上面使用webpack打包时需要手动指定loader,我们可以将一些编译选项放在配置文件中,以便于统一管理:
webpack.config.js 文件
module.exports = {
entry: "./runoob1.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
}
};
接下来我们只需要执行 webpack 命令即可生成 bundle.js 文件:
webpack