webpack
目录
webpack介绍
- 是一款打包构建工具,目前就流行打包构建工具
- 特点
- 一切皆模块
- 能把所有资源打包成浏览器能识别的html,css,js,png
nodejs模块系统
-
js模块系统规范
- ES6(掌握)
- AMD规范(了解) requirejs使用
- CMD规范(了解) sea.js使用
- commonjs规范 nodejs使用
-
nodejs 模块系统遵循 commonjs 模块规范
-
导出模块
// m1.js const cat = { age: 2, name: '白猫' } module.exports = cat;
- 导入模块
// index.js
const aa = require('./cat.js');
consoe.log(aa.name);
- 测试 打开命令提示父,进入 index.js 所在目录,运行 node index.js 看是否打印出"白猫"
demo01 入口和出口
目录
- 入口和出口是什么
- 配置文件webpack.config.js
- mode设置(模式设置)
- 打包命令webpack
概念
- 入口 入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
- 出口 output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。
具体例子
- 新建文件夹demo1.0
- 初始化package.json
npm init -y - 新建main.js,m1.js,m2.js
// main.js
const m1 = require('./m1');
console.log('main.js');
// m1.js
const m2 = require('./m2');
console.log('我是m1.....');
// m2.js
console.log('我是m2.....');
-
webpack配置文件
// 导入nodejs的path const path = require('path'); module.exports = { // 入口配置 entry: './main.js', // 出口配置 output: { // 打包后的文件名称 filename: 'laohu.js', // 配置打包后的路径,__dirname当前目录, path: path.resolve(__dirname, 'dist') }, mode: 'production' }- 运行webpack,打包成功会在本地创建一个dist文件夹,里面有一个laohu.js
demo02 loader配置
- loader是什么
- css-loader配置
- less-loader配置
loader是什么
在webpack眼里,一切皆模块,js、css、img、txt、vue等统统都是模块，但webpack默认只认识js模块，其它文件都需要配置相应的加载器（loader）才能正确的识别，比如css要配css-loader，vue要配vue-loader
配置css-loader
-
npm init 初始化package.json
-
安装style-loader
npm i style-loader --save-dev -
安装css-loader
npm i css-loader --save-dev
-
配置webpack.config.js
var path = require('path'); module.exports = { mode: 'development', entry: './main.js', output: { filename: 'main-webpack.js', path: path.resolve(__dirname,'dist') }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] } }
-
创建style.css
body { background: gray; } -
创建main.js,导入style.css
require('./style.css'); console.log('在这里做的别的事情') -
运行打包命令 webpack
-
检验: 在dist(打包后生成的文件夹)文件夹内新建index.html,导入main-webpack.js,然后打开,看网页的背景颜色是否为灰色
配置less-loader
- 安装less 和 less-loader(可以批量安装)
npm install --save-dev less-loader less style-loader css-loader
-
webpack配置
// path是nodejs的路径处理插件 const path = require('path'); module.exports = { // 模式 production-生产环境 development-开发环境 mode: 'development', // 入口 entry: './main.js', // 出口 output: { path: path.resolve(__dirname, 'dist'), filename: 'index.js' }, module: { rules: [{ test: /\.less$/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS }, { loader: "less-loader" // compiles Less to CSS }] }] } }; -
新建main.js和app.less
// main.js require('./app.less'); console.log('在这里做的别的事情')
// app.less
div {
h3 {
color: red;
font-size: 30px
}
}
-
检验:在dist文件夹新建index.html,导入打开看看h3是否变了颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./index.js"></script> </head> <body> <div> <h3> 这是h3 </h3> </div> </body> </html>
demo03 plugins(插件)
目录
- 插件是什么,有什么用
- 配置生成html的插件
- 定义全局变量的插件
插件是什么,有什么用
oader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
配置生成html的插件
- 安装html-webpack-plugin
npm i html-webpack-plugin
-
webpack.config.js的配置如下
// 最简单的配置
const path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: './main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'main-webpack.js' }, plugins: [new HtmlWebpackPlugin()] };// 用指定的模板生成html文件
const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main-webpack.js'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './tpl.html'
})
]
};
// tpl.html内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue项目</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
配置生成全局变量的插件
- 安装html-webpack-plugin和webpack
npm i html-webpack-plugin webpack
-
webpack.config.js配置
const webpack = require('webpack'); const htmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); module.exports = { // 模式 production-生产环境 development-开发环境 mode: 'development', // 入口 entry: './main.js', // 出口 output: { path: path.resolve(__dirname, 'dist'), filename: 'main-webpack.js' }, plugins:[ new htmlWebpackPlugin(), new webpack.DefinePlugin({ // 值是字符串的时候需要多加一个引号 'username': '"老胡"', 'process.env.baseUrl': '"http://huruqing.cn"' }) ] };-
main.js内容
console.log('useranme:',username); console.log('baseUrl:',process.env.baseUrl);
-
4. 运行webpack打包命令,打开dist里的index.html文件,检查控制台的打印结果
网友评论