webpack安装配置指令
进行重新加载编译。实际就是将浏览器不认识的语法编译成浏览器认识的语法。比如less编译成css，ES6 语法 转成 ES5等等。
减少io请求,通常我们在请求后，会返回一个html到浏览器。这时，我们如果打开控制台，就会发现在html页面通过script,link等标签引用的静态资源， 浏览器会再次发出请求去获取这些资源。但是webpack的打包，将所有的静态资源都合并好了，减少了io请求。
# 安装webpack
npm install --save-dev webpack# 安装webpack-cli依赖
npm install --save-dev webpack-cli# 创建新项目
mkdir demo# cd项目
cd demo# 初始化
npm init -y# 安装开发版本cli
npm install webpack webpack-cli --save-dev新建一个html文件和一个js文件，工程目录如下
demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.jssrc/index.js:
function component() {
var element = document.createElement('div');
// Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());index.html:
<!doctype html>
<html>
<head>
<title>起步</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>在package.json中：
删除"main": "index.js",添加"private": true
调整工程目录：
demo
|- package.json
+ |- /dist
+ |- index.html
- |- index.html
|- /src
|- index.js要在index.js中打包lodash依赖，我们需要在本地安装 library，终端输入指令：
npm install --save lodash然后调整index.js内容
// 添加一行代码
import _ from 'lodash';在dist/index.html中可以把引入的外部文件lodash删去
删去<script src="./src/index.js"></script>
添加<script src="main.js"></script>
执行终端：
npx webpack即可在dist中打包生成需要的main.js文件
还可以手动配置文件，在根目录下新建一个webpack.config.js文件
const path = require('path');
module.exports = {
// 这里放着需要打包的文件，如果多个文件，用数组形式写
entry: './src/index.js',
output: {
// 这里是打包生成的文件名，还可以手动修改
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};考虑到用 CLI 这种方式来运行本地的 webpack 不是特别方便，我们可以设置一个快捷方式，
在package.json中的"scripts"新增
"build": "webpack"这样就可以使用npm run build指令代替之前的npx了
把之前dist文件夹里面的js文件删去，然后重新打包
npm run build看一下工程目录
demo
|- package.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
|- index.js
|- /node_modules没问题，成功打包，浏览器也正常显示
在js文件中import了一个css文件，需要在配置中安装并添加style-loaader和css-loader
npm install --save-dev style-loader css-loaderwebpack.config.js:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// 添加的内容
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
};然后在js模块中：
import './style.css'npm run build就可以自动解析打包啦
加载图片
下载安装file-loader
npm install --save-dev file-loaderwebpack.config.js:
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
}加载字体
记载数据资源
此外，可加载的有用资源还有数据，json文件，CSV，TSV，XML等，实际上，json是内置的，可以直接import data from './data.json'引入
但是CSV，TSV，XML不可以，需要配置一下依赖
终端下载安装：
npm install --save-dev csv-loader xml-loaderwebpack.config.js:
{
test: /\.(csv|tsv)$/,
use: [
'csv-loader'
]
},
{
test: /\.xml$/,
use: [
'xml-loader'
]
}在src目录下添加一个json文件data.json
然后在index.js中引入：
import data from './data.json'腾讯云开发者
