本文纯属个人笔记，毫无指导倾向和价值！
什么是webpack
webpack 是模块打包器。
根据模块的关系进行静态分析，然后将模块按照指定的规则生成对应的静态资源。
安装 webpack
- 1 来到需要的位置：
cd /User/willli/Site - 2 新建一个项目，命名为 "webpack-study"：
mkdir webpack-study - 3 在项目中初始化 npm：
npm init - 4 在项目中安装 webpack ：
npm install webpack --save-dev
基本配置
- 1 在项目根目录下，创建配置文件： webpack.config.js
- 2 先新建两个目录 src(用来存放脚本样式等) 和 dist(用来存放打包后的文件)
mkdir src
mkdir dist - 3 来到 src 目录下：
cd src
新建两个目录 script(用来存放脚本) 和 css(用来存放样式)
mkdir script
mkdir css
测试一下
- 1 在 src/script 目录下 新建两个脚本文件 a.js 和 b.js，随便在里面写点什么👇
Paste_Image.png
- 2 在配置文件 webpack.config.js 中添加代码
module.exports = {
// 希望被打包的文件
entry: ['./src/script/a.js', './src/script/b.js'],
output: {
// 打包后的输出位置
filename: './dist/bundle.js'
}
}
- 3 在命令行中输入
webpack运行。 - 4 如果在 dist 目录下看到打包好的 bundle.js 则证明安装和配置都已成功，可以在实际项目中正式操作了。
更接近现实的操作——webpack.config.js 和 主文件
通过配置文件，才更接近我们现实中开发的行为。
webpack 在执行时，除了命令行传入参数，还可以通过指定配置文件操作。
默认下，会搜索当前目录下的 webpack.config.js 文件，这是一个 node 模块，返回一个 json 格式的配置信息对象。
在 wepack.config.js 文件中添加我们的项目的依赖:
"devDependencies": {
"webpack": "^2.3.3",
"css-loader": "^0.21.0",
"style-loader": "^0.13.0"
}
👆这里是添加了 css-loader 和 style-loader 的依赖（这是两个loader），它们是用来解释和引用 CSS 文件的。
使用插件
使用插件时候，要先引用它。
以一个可以自动生成 html 文件的插件为例👇
var HtmlwebpackPlugin = require('html-webpack-plugin');
然后在要实例化它👇
// webpack.config.js
plugins: [
new HtmlwebpackPlugin({
title: 'demo',
filename: 'index.html'
})
]
👆这里生成了一个名为 index.html ，页面 title 为 demo 的 html 页面。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如 index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。
练手
这里有一个练手 demo 集合
我只完成到 demo09 ，因为后面让我联想不出实际应用场景，不知所以。
还有一个慕课网的视频教程 webpack深入与实战 是非常的好的非常适合新手起步的。
[完]
网友评论