什么是Webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。
Webpack安装
命令:
npm install -g webpack webpack-cli
安装后查看版本号
webpack -v
使用webpack
创建js文件用于打包操作,在common.js,utils.js中定义方法在mian.js中引入common和utils
common.js
exports.info = function (str) {
document.write(str);//浏览器输出
}
utils.js
exports.add = function (a, b) {
return a + b;
}
main.js
const common = require('./common');
const utils = require('./utils');
common.info('Hello world!' + utils.add(100, 200));
创建webpack配置文件,配置打包信息
webpack.config.js
const path = require("path"); //Node.js内置模块
module.exports = {
entry: './src/main.js', //配置入口文件
output: {
path: path.resolve(__dirname, './dist'), //输出路径,__dirname:当前文件所在路径
filename: 'bundle.js' //输出文件
}
}
使用命令执行打包
webpack #有黄色警告
webpack --mode=development #没有警告
也可以配置项目的npm运行命令,修改package.json文件
"scripts": {
//...,
"dev": "webpack --mode=development"
}
运行npm命令执行打包
npm run dev
使用webpack命令出现警告
使用webpack --mode=development命令无警告
测试
创建一个html文件,引入打包后的js文件,使用浏览器查看效果
<script src="dist/bundle.js">
</script>
打包css文件
1.创建css文件,写样式内容
body {
background-color: brown;
}
2.在main.js中引入css文件
const common = require('./common');
const utils = require('./utils');
//css文件引入,后缀不能省略
require('./style.css')
common.info('Hello world!' + utils.add(100, 200));
3.安装style-loader和 css-loader
npm install --save-dev style-loader css-loader
4.修改webpack配置文件
const path = require("path"); //Node.js内置模块
module.exports = {
entry: './src/main.js', //配置入口文件
output: {
path: path.resolve(__dirname, './dist'), //输出路径,__dirname:当前文件所在路径
filename: 'bundle.js' //输出文件
},
module: {
rules: [
{
test: /\.css$/, //打包规则应用到以css结尾的文件上
use: ['style-loader', 'css-loader']
}
]
}
}
测试