从零开始的Webpack4教程

1、了解Webpack相关什么是webpackWebpack是一个模块打包器(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理解LoaderWebpack 本身只能加载JS/JSON模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换/加载Loader 本身也是运行在 node.js 环境中的 JavaScript 模块它本身是一个函数，接受源文件作为参数，返回转换的结果loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 json-loader。理解Plugins插件可以完成一些loader不能完成的功能。插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。配置文件(默认)webpack.config.js : 是一个node模块，返回一个 json 格式的配置信息对象2、开启项目初始化项目：生成package.json文件{ “name”: “webpack_test”, “version”: “1.0.0”} 安装webpacknpm install webpack webpack-cli -g //全局安装npm install webpack webpack-cli -D //本地安装3、编译打包应用创建js文件src/js/app.jssrc/js/module1.jssrc/js/module2.jssrc/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能够编译打包js和json文件能将es6的模块化语法转换成浏览器能识别的语法能压缩代码缺点：不能编译打包css、img等文件不能将js的es6基本语法转化为es5以下语法改善：使用webpack配置文件解决，自定义功能4、使用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’ //生产环境(二选一)};运行指令： webpack5、js语法检查安装loadernpm install eslint-loader eslint –save-dev配置loadermodule: { 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 模块 }}运行指令：webpack6、js语法转换安装loadernpm install babel-loader @babel/core @babel/preset-env –save-dev配置loadermodule: { rules: [ { oneOf: [ //数组中的配置只有一个能够生效, 后面的配置都会放在当前数组中 { test: /.js$/, exclude: /node_modules/, use: { loader: “babel-loader”, options: { presets: [’@babel/preset-env’] } } } ] } ]}运行指令：webpack7、打包less资源创建less文件src/less/test1.lesssrc/less/test2.less入口app.js文件引入less资源安装loadernpm install css-loader style-loader less-loader less –save-dev配置loaderoneOf: [ { test: /.less$/, use: [{ loader: “style-loader” }, { loader: “css-loader” }, { loader: “less-loader” }] }]运行指令：webpack在index.html中引入打包生成的dist/js/bundle.js文件,观察效果8、打包样式文件中的图片资源添加2张图片:小图, 小于8kb: src/images/1.png大图, 大于8kb: src/images/2.jpg在less文件中通过背景图的方式引入图片安装loadernpm 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文件,观察效果9、打包html文件添加html文件src/index.html注意不要在html中引入任何css和js文件安装插件Pluginsnpm install clean-webpack-plugin –save-dev在webpack.config.js中引入插件（插件都需要手动引入，而loader会自动加载）const CleanWebpackPlugin = require(‘clean-webpack-plugin’)配置插件Pluginsplugins: [ new HtmlWebpackPlugin({ template: ‘./src/index.html’ }),]运行指令：webpack10、打包html中图片资源添加图片在src/index.html添加两个img标签安装loadernpm install html-loader –save-dev修改entryentry: [’./src/js/app.js’, ‘./src/index.html’]配置loader{ test: /.(html)$/, use: { loader: ‘html-loader’ }}运行指令：webpack11、打包其他资源添加字体文件src/media/iconfont.eotsrc/media/iconfont.svgsrc/media/iconfont.ttfsrc/media/iconfont.woffsrc/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]’, },}运行指令：webpack12、自动编译打包运行安装loadernpm install webpack-dev-server –save-dev引入webpackconst 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开发环境的配置，可以在内存中自动打包所有类型文件并有自动编译运行、热更新等功能。13、准备生产环境创建文件夹config，将webpack.config.js复制两份webpack.dev.jswebpack.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 startnpm run dev生产环境指令npm run build注意: 生产环境代码需要部署到服务器上才能运行npm i serve -gserve -s dist14、清除打包文件目录安装插件npm install clean-webpack-plugin –save-dev引入插件const CleanWebpackPlugin = require(‘clean-webpack-plugin’);配置插件new CleanWebpackPlugin()运行指令：npm run build15、提取css成单独文件安装插件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 buildserve -s dist16、添加css兼容安装loadernpm install postcss-loader autoprefixer –save-dev配置loader{ test: /.less$/, use: [ MiniCssExtractPlugin.loader, ‘css-loader’, ‘postcss-loader’, ’less-loader’, ]}在项目根目录添加postcss配置文件：postcss.config.jsmodule.exports = { “plugins”: { “autoprefixer”: { “browsers”: [ “ie >= 8”, “ff >= 30”, “chrome >= 34”, “safari >= 8”, “opera >= 23” ] } }}运行指令：npm run buildserve -s dist17、压缩css安装插件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 buildserve -s dist18、图片压缩安装loadernpm 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 buildserve -s dist19、压缩html修改插件配置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 buildserve -s dist以上就是webpack生产环境的配置，可以生成打包后的文件。到这里基本配置已经告一段落了，所有配置我已经放在 仓库 中了。后期会考虑出一期优化配置，将webpack优化到底~