1.为什么我们需要打包？
- 模块化
- 优化加载速度
- 使用新的开发模式
2.webpack特点
- 同时支持CommonJs和AMD
- 一切都可以打包
- 分模块打包
3.正式使用webpack前的准备
- 全局安装webpack：npm install webpack -g
- 创建工程目录：mkdir webpack-test
- 进入工程目录：cd webpack-test
- 初始化工程信息： npm init 或 npm init -y
- 安装依赖工具：npm install
- 将webpack打包工具依赖进来：npm install --save-dev webpack
- 在工程根目录下创建 index.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Webpack-test</title> </head> <body> <script src="bundle.js"></script> </body> </html>
4.打包js文件
- 在工程根目录下创建src文件夹，在src文件夹中创建 index.js
document.write('hello webpack!');
- 在工程根目录下创建webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
- 在工程根目录下创建dist文件夹，将index.html文件拷贝到dist文件夹下
- 在工程目录下执行webpack --config webpack.config.js
- 运行dist文件夹下面的index.html文件可以看到运行结果
- PS：设置npm脚本调整package.json ， 运行命令npm run build
{ ... "scripts": { "build": "webpack" }, ... }
5.打包css文件
- 将css-loader和style-loader依赖进来：npm install --save-dev css-loader style-loader
- 在src文件加下创建style.css , 并且编写相关样式
- 在webpack.config.js文件中做如下配置 ：
const path = require('path');
module.exports = {
//入口
entry: './src/index.js',
//输出
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
//模块处理
module: {
loaders: [{
//使用正则表达式检测文件后缀名
test: /.css$/,
//使用两个loader处理css文件，先执行css-loader(对css文件读取，处理url),再执行style-loader(读取css文件应用到页面上，即显示样式)
loaders: ['style-loader', 'css-loader']
}]
}
};
- 在src文件夹下的index.js添加代码：
require('./style.css');
- 控制台运行命令：npm run build
- 刷新浏览器页面
6.加载图片：npm install --save-dev file-loader
7.加载字体
8.加载数据：npm install --save-dev csv-loader xml-loader