新建文件夹webpack_note-->npm init -y-->全局安装webpack和webpack(* 安装webpack
- npm install webpack webpack-cli -g //全局安装
- npm install webpack webpack-cli -D //本地安装)
- 什么是webpack
- Webpack是一个模块打包器(bundler)。
- 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理
- 它将根据模块的依赖关系进行静态分析，生成对应的静态资源
- 五个核心概念
- Entry：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
- Output：output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。
- Loader：loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只能解析 JavaScript）。
- Plugins：插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
- Mode：模式，有生产模式production和开发模式development
- 理解Loader
- Webpack 本身只能加载JS/JSON模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换/加载
- Loader 本身也是运行在 node.js 环境中的 JavaScript 模块
- 它本身是一个函数，接受源文件作为参数，返回转换的结果
- loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 json-loader。
- 理解Plugins
- 插件可以完成一些loader不能完成的功能。
- 插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。
- 配置文件(默认)
- webpack.config.js : 是一个node模块，返回一个 json 格式的配置信息对象
- 初始化项目：
- 生成package.json文件
{ "name": "webpack_test", "version": "1.0.0" }
- 生成package.json文件
- 安装webpack
- npm install webpack webpack-cli -g //全局安装
- npm install webpack webpack-cli -D //本地安装
- 创建js文件
- src/js/app.js
- src/js/module1.js
- src/js/module2.js
- src/js/module3.js
- 创建json文件
- src/json/data.json
- 创建主页面:
- src/index.html
- 运行指令
- 开发配置指令：webpack src/js/app.js -o dist/js/app.js --mode=development
- 功能: webpack能够编译打包js和json文件，并且能将es6的模块化语法转换成浏览器能识别的语法
- 生产配置指令：webpack src/js/app.js -o dist/js/app.js --mode=production
- 功能: 在开发配置功能上加上一个压缩代码
- 开发配置指令：webpack src/js/app.js -o dist/js/app.js --mode=development
- 结论：
- webpack能够编译打包js和json文件
- 能将es6的模块化语法转换成浏览器能识别的语法
- 能压缩代码
- 缺点：
- 不能编译打包css、img等文件
- 不能将js的es6基本语法转化为es5以下语法
- 改善：使用webpack配置文件解决，自定义功能
- 目的：在项目根目录定义配置文件，通过自定义配置文件，还原以上功能
- 文件名称：webpack.config.js
- 文件内容：
const {resolve} = require('path'); //node内置核心模块，用来设置路径。 module.exports = { entry: './src/js/app.js', // 入口文件 output: { // 输出配置 filename: './js/bundle.js', // 输出文件名 path: resolve(__dirname, 'dist') //输出文件路径配置 }, mode: 'development' //开发环境(二选一) mode: 'production' //生产环境(二选一) }; - 运行指令： webpack
- 安装loader
- npm install eslint-loader eslint --save-dev
- 配置loader
module: { rules: [ { test: /\.js$/, //只检测js文件 exclude: /node_modules/, //排除node_modules文件夹 enforce: "pre", //提前加载使用 use: { //使用eslint-loader解析 loader: "eslint-loader" } } ] } - 修改package.json（需要删除注释才能生效）
"eslintConfig": { //eslint配置 "parserOptions": { "ecmaVersion": 8, // es8 "sourceType": "module", // ECMAScript 模块 } } - 运行指令：webpack
- 安装loader
- npm install babel-loader @babel/core @babel/preset-env --save-dev
- 配置loader
module: { rules: [ { oneOf: [ //数组中的配置只有一个能够生效, 后面的配置都会放在当前数组中 { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ['@babel/preset-env'] } } } ] } ] } - 运行指令：webpack
- 创建less文件
- src/less/test1.less
- src/less/test2.less
- 入口app.js文件
- 引入less资源
- 安装loader
- npm install css-loader style-loader less-loader less --save-dev
- 配置loader
oneOf: [ { test: /\.less$/, use: [{ loader: "style-loader" }, { loader: "css-loader" }, { loader: "less-loader" }] } ] - 运行指令：webpack
- 在index.html中引入打包生成的dist/js/bundle.js文件,观察效果
-
添加2张图片:
- 小图, 小于8kb: src/images/1.png
- 大图, 大于8kb: src/images/2.jpg
-
在less文件中通过背景图的方式引入图片
-
安装loader
- npm install file-loader url-loader --save-dev
- 补充：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。
-
配置loader
{ test: /\.(png|jpg|gif|svg)$/, use: [ { loader: 'url-loader', options: { outputPath: 'images/', //在output基础上，修改输出图片文件的位置 publicPath: '../dist/images/', //修改背景图引入url的路径 limit: 8 * 1024, // 8kb大小以下的图片文件都用base64处理 name: '[hash:8].[ext]' // hash值为7位，ext自动补全文件扩展名 } } ] } -
运行指令：webpack
-
在index.html中引入打包生成的dist/js/bundle.js文件,观察效果
- 添加html文件
- src/index.html
- 注意不要在html中引入任何css和js文件
- 安装插件Plugins
- npm install clean-webpack-plugin --save-dev
- 在webpack.config.js中引入插件（插件都需要手动引入，而loader会自动加载）
- const CleanWebpackPlugin = require('clean-webpack-plugin')
- 配置插件Plugins
plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }), ] - 运行指令：webpack
- 添加图片
- 在src/index.html添加两个img标签
- 安装loader
- npm install html-loader --save-dev
- 修改entry
- entry: ['./src/js/app.js', './src/index.html']
- 配置loader
{ test: /\.(html)$/, use: { loader: 'html-loader' } } - 运行指令：webpack
- 添加字体文件
- src/media/iconfont.eot
- src/media/iconfont.svg
- src/media/iconfont.ttf
- src/media/iconfont.woff
- src/media/iconfont.woff2
- 修改样式
@font-face { font-family: 'iconfont'; src: url('../media/iconfont.eot'); src: url('../media/iconfont.eot?#iefix') format('embedded-opentype'), url('../media/iconfont.woff2') format('woff2'), url('../media/iconfont.woff') format('woff'), url('../media/iconfont.ttf') format('truetype'), url('../media/iconfont.svg#iconfont') format('svg'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } - 修改html，添加字体
- 配置loader
{ loader: 'file-loader', exclude: [/\.js$/, /\.html$/, /\.json$/], options: { outputPath: 'media/', publicPath: '../dist/media/', name: '[hash:8].[ext]', }, } - 运行指令：webpack
- 安装loader
- npm install webpack-dev-server --save-dev
- 引入webpack
- const webpack = require('webpack');
- 修改webpack配置对象（注意不是loader中）
devtool: 'inline-source-map', // 将编译后的代码映射回原始源代码，更容易地追踪错误和警告 devServer: { contentBase: './dist', //项目根路径 hot: true, //开启热模替换功能 open: true //自动打开浏览器 }, plugins: [ new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin() ] - 修改loader部分配置
- 因为构建工具以dist为根目录，不用再找dist了
publicPath: '../dist/images/'-->publicPath: 'images/'publicPath: '../dist/media/'-->publicPath: 'media/'
- 修改package.json中scripts指令
- "start": "webpack-dev-server",
- "dev": "webpack-dev-server"
- 运行指令：npm start / npm run dev
以上就是webpack开发环境的配置，可以在内存中自动打包所有类型文件并有自动编译运行、热更新等功能。
- 创建文件夹config，将webpack.config.js复制两份
- webpack.dev.js
- webpack.prod.js
- 修改webpack.prod.js配置，删除webpack-dev-server配置
module.exports = { output: { filename: 'js/[name].[hash:8].js', //添加了hash值, 实现静态资源的长期缓存 publicPath: '/' //所有输出资源公共路径 }, module: { //loader其他没有变化，只放了变化部分，只有需要修改路径部分改了 rules: [ { oneOf: [ { test: /\.(png|jpg|gif|svg)$/, use: [ { loader: 'url-loader', options: { limit: 8 * 1024, // 8kb大小以下的图片文件都用base64处理 name: 'images/[name].[hash:8].[ext]' } } ] }, { loader: 'file-loader', exclude: [/\.js$/, /\.html$/, /\.json$/], options: { name: 'media/[name].[hash:8].[ext]', }, } ] } ] }, mode: 'production', //修改为生产环境 } - 修改package.json的指令
- "start": "webpack-dev-server --config ./config/webpack.dev.js"
- "dev": "webpack-dev-server --config ./config/webpack.dev.js"
- "build": "webpack --config ./config/webpack.prod.js"
- 开发环境指令
- npm start
- npm run dev
- 生产环境指令
- npm run build
- 注意: 生产环境代码需要部署到服务器上才能运行
- npm i serve -g
- serve -s dist
- 安装插件
- npm install clean-webpack-plugin --save-dev
- 引入插件
- const {CleanWebpackPlugin} = require('clean-webpack-plugin');
- 配置插件
new CleanWebpackPlugin() - 运行指令：npm run build
- 安装插件
- npm install mini-css-extract-plugin --save-dev
- 引入插件
- const MiniCssExtractPlugin = require("mini-css-extract-plugin");
- 配置loader
{ test: /\.less$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader', ] } - 配置插件
new MiniCssExtractPlugin({ filename: "css/[name].[hash:8].css", chunkFilename: "css/[id].[hash:8].css" }) - 运行指令
- npm run build
- serve -s dist
- 安装loader
- npm install postcss-loader autoprefixer --save-dev
- 配置loader
{ test: /\.less$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader', ] } - 在项目根目录添加postcss配置文件：postcss.config.js
module.exports = { "plugins": { "autoprefixer": { "browsers": [ "ie >= 8", "ff >= 30", "chrome >= 34", "safari >= 8", "opera >= 23" ] } } } - 运行指令：
- npm run build
- serve -s dist
- 安装插件
- npm install optimize-css-assets-webpack-plugin --save-dev
- 引入插件
- const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
- 配置插件
new OptimizeCssAssetsPlugin({ cssProcessorPluginOptions: { preset: ['default', { discardComments: { removeAll: true } }], }, }) - 运行指令：
- npm run build
- serve -s dist
- 安装loader
- npm install img-loader imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo imagemin --save-dev
- 配置loader
{ test: /\.(png|jpg|gif|svg)$/, use: [ { loader: 'url-loader', options: { limit: 8 * 1024, // 8kb大小以下的图片文件都用base64处理 name: 'images/[name].[hash:8].[ext]' } }, { loader: 'img-loader', options: { plugins: [ require('imagemin-gifsicle')({ interlaced: false }), require('imagemin-mozjpeg')({ progressive: true, arithmetic: false }), require('imagemin-pngquant')({ floyd: 0.5, speed: 2 }), require('imagemin-svgo')({ plugins: [ { removeTitle: true }, { convertPathData: false } ] }) ] } } ] } - 运行指令：
- npm run build
- serve -s dist
- 修改插件配置
new HtmlWebpackPlugin({ template: './src/index.html', minify: { removeComments: true, collapseWhitespace: true, removeRedundantAttributes: true, useShortDoctype: true, removeEmptyAttributes: true, removeStyleLinkTypeAttributes: true, keepClosingSlash: true, minifyJS: true, minifyCSS: true, minifyURLs: true, } }) - 运行指令：
- npm run build
- serve -s dist
以上就是webpack生产环境的配置，可以生成打包后的文件。