点击刷新
标签：sso expand back round 创建 es6语法 deb pts no-repeat
### webpack 介绍 * 什么是webpack<https://www.webpackjs.com/> * Webpack是一个模块打包器(bundler)。 * 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理 * 它将根据模块的依赖关系进行静态分析，生成对应的静态资源 * 五个核心概念 * Entry：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。 * Output：output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件 * Loader：loader 让 webpack 能够去处理那些非 JavaScript 文件 * Plugins：插件则可以用于执行范围更广的任务。例如：打包优化、压缩， * Mode：模式，有生产模式 production (压缩)和开发模式 development * 理解 Loader * Webpack 本身只能加载 JS/JSON 模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换/加载 * Loader 本身也是运行在 node.js 环境中的 JavaScript 模块 * loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 less-loader。 * 理解 Plugins * 插件可以完成一些loader不能完成的功能。 * 插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。 * 配置文件(默认) * webpack.config.js : 是一个node模块，返回一个 json 格式的配置信息对象
1. import ... from 模块导入
npm init 包名（初始化）， 自动生成一个package.json文件,
npm i webpack webpack-cli --save-dev （局部安装）
npx webpack index.js (webpack将index.js文件编译打包)，自动生成dist文件夹--》main.js的打包文件
index.js
// ES Moudule 模块引入方式 import Header from ‘./header.js‘; import Sidebar from ‘./sidebar.js‘; new Header(); new Sidebar(); new Content();
header.js
function Header() { var dom = document.getElementById(‘root‘); var header = document.createElement(‘div‘); header.innerText = ‘header‘; dom.append(header); } exports.default Header;
sidebar.js
function Sidebar() { var dom = document.getElementById(‘root‘); var sidebar = document.createElement(‘div‘); sidebar.innerText = ‘sidebar‘; dom.append(sidebar); } exports.default Sidebar;
index.html， 引入打包之后的js文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>这是最原始的网页开发</title> </head> <body> <p>这是我们的网页内容</p> <div id=‘root‘></div> <script src=‘./dist/main.js‘></script> </body> </html>
此时页面可以注册显示
注；export ...from 是es6语法，浏览器不支持，需要通过webpack解析成浏览器支持的语法.
webpack模块打包工具，将所有的模块打包到一个文件
webapck支持也cmmonJs模块引入规范
// webpack 模块打包工具 // js 模块打包工具 -> // import Header from ‘./header.js‘; // import Sidebar from ‘./sidebar.js‘; // import Content from ‘./content.js‘; var Header = require(‘./header.js‘); var Sidebar = require(‘./sidebar.js‘); new Header(); new Sidebar();
function Header() { var dom = document.getElementById(‘root‘); var header = document.createElement(‘div‘); header.innerText = ‘header‘; dom.append(header); } //导出 module.exports = Header;
2.webapck安装方法
npm init -y 初始化包，自动生成一个package.json文件
npm install webpack webpack-cli -g //全局安装,作为指令使用
npm install webpack webpack-cli -D //本地安装,作为本地依赖使用
注；不建议全局安装webpack, 每个项目的webpack版本都不一样，会发生错乱
卸载。 npm uninstall webpack webpack-cli -g
webpack -v 版本(全局查询)
npx webpack -v(局部查询)
npm i webpack@4.2.5 webpack-cli -D 安装特定版本
3. webpack配置文件webpack.config.js
3.1. 配置出入口，此时运行打包命令， npx webpack，即可打包， 后面不需追加入口文件，因为，webpack配置了入口和出口。打包后的文件
dist-->bundle.js
//node内置核心模块，用来设置路径。 const path = require(‘path‘); //只能使用 CommonJS 规范暴露 module.exports = { // 入口文件配置 entry: ‘./src/index.js‘, // 输出配置 output: { // 输出文件名（打包文件名） filename: ‘bundle.js‘, //输出文件路径配置，dist文件夹，打包之后的路径dist-->bundle.js path: path.resolve(__dirname, ‘dist‘) } }
第二种的打包命令，在package.json中的script配置命令， 执行npm run bundle（底层执行了npx webpack）, 即可打包文件了
{ "name": "lesson", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "bundle": "webpack" }, "author": "", "license": "ISC", "devDependencies": { "webpack-cli": "^3.1.2" }, "dependencies": { "webpack": "^4.25.1" } }
3.2， 打包模式，
webpack默认是配置production环境，他会压缩bundle.js打包文件， 开发环境不会
//node内置核心模块，用来设置路径。 const path = require(‘path‘); //只能使用 CommonJS 规范暴露 module.exports = { // 开发环境 mode: ‘development‘, // 入口文件配置 entry: ‘./src/index.js‘, // 输出配置 output: { // 输出文件名（打包文件名） filename: ‘bundle.js‘, //输出文件路径配置，dist文件夹，打包之后的路径dist-->bundle.js path: path.resolve(__dirname, ‘dist‘) } }
* webpack能够编译打包 js 和 json 文件 * 能将 es6 的模块化语法转换成浏览器能识别的语法 不能编译打包 css、img 等文件
打包样式文件中的图片资源
图片文件 webpack 不能解析，需要借助 url-loader编译解析
-
两张资源图片:
-
小图, 小于8kb: src/images/vue.png
-
大图, 大于8kb: src/images/react.jpg
-
-
.react {
width: 200px;
height: 200px;
background: url(‘../images/react.png‘) no-repeat;
background-size: cover;
}
?
.vue {
width: 200px;
height: 200px;
background: url(‘../images/vue.png‘) no-repeat;
background-size: cover;
} -
安装 loader
> npm install file-loader url-loader --save-dev 补充：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。
-
webpack.config.js 配置 loader
module.exports = {
.
.
.
module: {
rules: [
.
.
.
{
test: /\.(png|jpg|gif)$/,
use: {
loader: ‘url-loader‘,
options: {
limit: 8192, // 8kb以下的图片会 base64 处理
outputPath: ‘images‘, // 文件本地输出路径
publicPath: ‘../build/images‘, // 图片的url路径，相对打包后的js文件
name: ‘[hash:8].[ext]‘, // 修改文件名称和后缀
}
}
},
]
}
?
} -
运行指令 npm run bundle
© 著作权归作者所有
发表评论
