webpack 是一个现代 JavaScript 应用程序的模块打包器 (module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图 (dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成少量的 bundle - 通常只有一个,由浏览器加载。
它是高度可配置的,但是,在开始前你需要先理解四个核心概念:入口 (entry)、输出 (output)、loader、插件 (plugins)。
这里说了这么多就是它能把项目中资源文件看成一个个模块,然后将他们打包成少量或一个文件,然后我们去引用这文件。
大家这里可能会疑惑,当时我也想,怎么能做到这个?怎么就打包成一个文件了?那么 js,CSS,图片什么的怎么搞?还有这种操作?我能怎么办,那只能选择相信它。
其实学习某一样工具,我们只需要知道这东西能做什么,然后怎么用它,但它具体实现的细节,有时我们不必深究。我们只需知其然,不必知其所以然。尽管去用这个东西,它本来就是一个工具。就好比开一辆车,我们只需去学习怎么开,而不用太在意他为什么能开,开多了一样成为老司机,不是吗,没毛病吧。工具它能给我们带来便利,就足够了。除非你是制造工具的。但是如果对 webpack 非常感兴趣,可以去它的 github 上看看。
上面说 webpack 能打包模块,其实还有很多功能。
上面举例是常用,其功能还多得多。都是通过 webpack 的 loader 和 plugins 实现的,可以说是很强大了。
- //全局安装
- npm install - g webpack
- //创建一个文件夹
- mkdir webpack - demo
- //进入项目中
- cd webpack - demo
- //初始化,生成默认package.json 文件
- npm init - y
- //在当前项目中安装webpack
- npm install webpack--save - dev
- //到这里就安装成功了
感受:整个流程和安装 gulp 差不多,是 npm 模块的那套安装流程。
说到 npm,在国内推荐使用 cnpm 淘宝镜像,很不错,速度快很多。还有可以逛 npm 的官网去查询自己想要看的模块,里面都有模块的详细介绍。
- // 安装css-loader
- npm install css - loader--save - dev
- // 安装htmlWebpackPlugin
- npm install html - webpack - plugin--save - dev
- //引入模块
- const webpack = require('webpack');
- const path = require('path');
- const htmlWebpackPlugin = require('html-webpack-plugin');
- //配置
- const config = {
- entry: './path/to/my/entry/file.js',
- output: {
- path: path.resolve(__dirname, 'dist'),
- filename: 'my-first-webpack.bundle.js'
- },
- module: {
- rules: [{
- test: /\.css$/,
- use: 'css-loader'
- }]
- },
- plugins: [new HtmlWebpackPlugin({
- template: './src/index.html'
- })]
- };
来源: http://www.cnblogs.com/Ry-yuan/p/7220494.html