apache做网站,公司网站怎么做优化,软文广告平台,住总集团公司宣传册设计样本Webpact学习笔记记录 一.初始化项目1.生成package.json2.安装webpack3.执行webpack体验 二、webpack的配置文件三、less-loader解析less1.安装loader2.配置 四、eslint-loader语法检查1.安装loader2.配置loader3.在package.json中加入 五、js语法转换1.安装loader2.配置loader … Webpact学习笔记记录 一.初始化项目1.生成package.json2.安装webpack3.执行webpack体验 二、webpack的配置文件三、less-loader解析less1.安装loader2.配置 四、eslint-loader语法检查1.安装loader2.配置loader3.在package.json中加入 五、js语法转换1.安装loader2.配置loader 六、js兼容性处理1. 第一种方法使用polyfill2. 第二种方法借助按需引入core-js 七、url-loader解析样式中的图片1.安装loader2.配置loader 八、打包html文件1.安装插件2.配置插件 九、打包html中图片资源1.安装loader2.配置loader3.执行webpack命令即可 十、打包其他资源1.使用file-loader处理即可file-loader前面已经下载过 十一、自动编译打包运行1.安装loader2.修改webpack配置3.package.json中修改如下 十一、开启热模替换十二、devtool映射技术十三、清除打包文件目录1.安装插件2.配置与引用插件 十四、提取css成单独的文件1.安装插件2.引入插件3.配置loader 十五、css文件的兼容性处理1.安装2.配置 十六、压缩css1.安装插件2.引入插件3.配置插件 十七、压缩html十八、完整的package.json依赖如下 声明以下笔记内容均摘自Webpackreact全家桶开发谷粒后台项目 ~张天禹老师的讲课视频仅供学习使用
这个项目比较旧因此以下的的安装都加上了版本号以免新版本不兼容影响学习如果不加上版本号会有不一样的表现也可能出错~。
一.初始化项目
1.生成package.json
npm init2.安装webpack
yarn add webpack^4.41.2 webpack-cli^3.3.103.执行webpack体验
webpack ./src/js/index.js -o ./dist/js/index.js --mode development$ webpack ./src/js/index.js -o ./dist/js/index.js --mode development
asset main.js 6.53 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
cacheable modules 1.09 KiB./src/js/index.js 446 bytes [built] [code generated]./src/js/module1.js 273 bytes [built] [code generated]./src/js/module2.js 109 bytes [built] [code generated]./src/js/module3.js 288 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 118 ms二、webpack的配置文件
在webpack_test下建一个webpack.config.js
/*** 此文件是webpack的配置文件用于指定webpack去执行哪些任务*/const resolve require(path).resolve;module.exports {// 指定入口文件entry: ./src/js/index.js,// 指定输出文件output: {path: resolve(__dirname, dist), // 输出文件的路径filename: js/index.js // 输出文件的名称},// 模式mode: development // development production 配置工作模式
};直接执行命令webpack回车进行测试使用配置文件进行构建
三、less-loader解析less
1.安装loader
yarn add css-loader^3.2.0 style-loader^1.0.1 less-loader^5.0.0 less^3.10.32.配置 // 指定loader,loader是用于加载某些文件的module: {rules: [// 指定loader规则{test: /\.less$/, // 匹配所有的less文件use: [// 指定使用哪些loaderstyle-loader, // 用于将css代码以style标签的形式添加到页面中css-loader, // 用于将css文件加载到js中less-loader // 用于将less文件转为css文件]}]}执行webpack测试
四、eslint-loader语法检查
对js基本语法错误进行提前检查
1.安装loader
yarn add eslint-loader^4.0.2 eslint^7.32.02.配置loader
webpack.config.js中加入以下 // js语法检查{test: /\.js$/,exclude: /node_modules/, // 排除node_modules文件夹loader: eslint-loader, // 指定使用的loaderenforce: pre, // 指定loader的执行顺序pre表示优先执行options: { // 指定eslint-loader的配置// eslint options (if necessary)}}3.在package.json中加入 eslintConfig: {parserOptions: {ecmaVersion: 6,sourceType: module},env: {browser: true,node: true},globals: {$: readonly},rules: {no-console: 0,eqeqeq: 2,no-alert: 2},extends: eslint:recommended}以上配置参考了https://blog.csdn.net/qq_41040989/article/details/128924218 “eslintConfig”: { “parserOptions”: { “ecmaVersion”: 6, // 支持es6 “sourceType”: “module” // 使用es6模块化 }, “env”: { // 设置环境 “browser”: true, // 支持浏览器环境 能够使用window上的全局变量 “node”: true // 支持服务器环境: 能够使用node上global的全局变量 }, “globals”: { // 声明使用的全局变量, 这样即使没有定义也不会报错了 “$”: “readonly” // $ 只读变量 }, “rules”: { // eslint检查的规则 0 忽略 1 警告 2 错误 “no-console”: 0, // 不检查console “eqeqeq”: 2, // 用而不用就报错 “no-alert”: 2 // 不能使用alert }, “extends”: “eslint:recommended” // 使用eslint推荐的默认规则 https://cn.eslint.org/docs/rules/ }, 最后执行webpack测试
五、js语法转换
1.安装loader
yarn add babel-loader^8.0.6 babel/core^7.7.2 babel/preset-env^7.7.12.配置loader // js语法转换{test: /\.js$/,exclude: /node_modules/, // 排除node_modules文件夹use: {loader: babel-loader, // 指定使用的loaderoptions: { // 指定babel-loader的配置presets: [babel/preset-env]}}}六、js兼容性处理
1. 第一种方法使用polyfill
#安装
yarn add babel/polyfill^7.7.0使用: 在App.js或index.js中引用
import babel/polyfill; // 引入babel-polyfill用于兼容ie浏览器缺点体积太大。
2. 第二种方法借助按需引入core-js
安装
yarn add core-js^3.4.1配置loader // js语法转换{test: /\.js$/,exclude: /node_modules/, // 排除node_modules文件夹use: {loader: babel-loader, // 指定使用的loaderoptions: { // 指定babel-loader的配置presets: [[babel/preset-env,{useBuiltIns: usage, // 按需引入需要使用polyfillcorejs: { version: 3 }, // 指定core-js的版本targets: { // 指定兼容到哪个版本的浏览器chrome: 58,ie: 9,}}],],cacheDirectory: true // 开启babel缓存}}}七、url-loader解析样式中的图片
1.安装loader
yarn add file-loader^4.2.0 url-loader^2.2.02.配置loader // 处理图片, url-loader,可以将图片转为base64处理{test: /\.(png|jpg|gif)$/,use: [{loader: url-loader, // 指定使用的loaderoptions: {limit: 1024 * 10, // 8 * 1024 8kb 以下的图片会被base64处理outputPath: images, // 指定输出的目录publicPath: ../dist/images, // 指定图片的公共路径name: [hash:5].[ext] // 指定输出的文件名}}]}八、打包html文件
html不再主动引入js了由webpack自动打包引入 如需要将以下的script src../dist/js/index.js/script取消引入然后由插件打包进去
headmeta charsetUTF-8titleWebpack_test/titlescript src../dist/js/index.js/script
/head1.安装插件
yarn add html-webpack-plugin^4.5.02.配置插件 const HtmlWebpackPlugin require(html-webpack-plugin);// 配置插件plugins: [// 用于将指定的html文件移动到输出目录并且自动引入打包后的js文件new HtmlWebpackPlugin({template: ./src/index.html // 指定要移动的html文件})]九、打包html中图片资源
url-loader和file-loader只能处理js中的图片资源要处理件中的图片资源需要使用html-loader。
1.安装loader
yarn add html-loader^0.5.52.配置loader // 处理html中的图片{test: /\.html$/,use: [{loader: html-loader, // 指定使用的loaderoptions: {esModule: false // 指定html-loader不使用es6模块化解析}}]}3.执行webpack命令即可
十、打包其他资源
1.使用file-loader处理即可file-loader前面已经下载过 // 使用file-loader处理字体文件和其他文件{test: /\.(eot|svg|ttf|woff|woff2|mp3|mp3|avi)$/,loader: file-loader, // 指定使用的loaderoptions: {outputPath: media, // 指定输出的目录name: [hash:5].[ext] // 指定输出的文件名}}十一、自动编译打包运行
1.安装loader
yarn add webpack-dev-server^3.9.02.修改webpack配置 // 配置开发服务器devServer: {compress: true, // 启动gzip压缩port: 3000, // 指定端口号open: true, // 自动打开浏览器}3.package.json中修改如下 scripts: {start: webpack-dev-server,},十一、开启热模替换
hot: truepackage.json中增加此配置 devServer: {compress: true, // 启动gzip压缩port: 3000, // 指定端口号open: true, // 自动打开浏览器hot: true, // 开启热更新}入口配置修改如下
entry: [./src/js/index.js, ./src/index.html],十二、devtool映射技术
在webpack.config.js中加入以下配置即可 devtool: cheap-module-eval-source-map // 开发环境下使用// devtool: cheap-module-source-map // 生产环境下使用十三、清除打包文件目录
通过插件自动删除上一次的打包文件
1.安装插件
yarn add clean-webpack-plugin^3.0.02.配置与引用插件
const { CleanWebpackPlugin } require(clean-webpack-plugin);// 配置插件plugins: [// 用于清除指定目录的文件new CleanWebpackPlugin()],十四、提取css成单独的文件
1.安装插件
yarn add mini-css-extract-plugin^0.8.02.引入插件
const MiniCssExtractPlugin require(mini-css-extract-plugin); // 用于将css代码提取为单独的文件3.配置loader
{test: /\.less$/, // 指定匹配的文件// 指定使用的loaderuse: [MiniCssExtractPlugin.loader,css-loader, // 用于将css文件加载到js中less-loader // 用于将less文件转为css文件]}十五、css文件的兼容性处理
1.安装
yarn add postcss-loader^3.0.0 postcss-flexbugs-fixes^4.1.0 postcss-preset-env^6.7.0 postcss-normalize^8.0.12.配置
{loader: postcss-loader, // 用于给css代码自动添加兼容性前缀options: {postcssOptions: {plugins: () [require(postcss-flexbugs-fixs),require(postcss-preset-env)({autoprefixer: {flexbox: no-2009},stage: 3})],sourceMap: true}}},在src目录下增加.browserslistrc文件
# Browsers that we supportlast 1 version1%
IE 10 # sorry十六、压缩css
1.安装插件
yarn add optimize-css-assets-webpack-plugin^5.0.32.引入插件
const optimizeCssAssetsWebpackPlugin require(optimize-css-assets-webpack-plugin); // 用于压缩css代码3.配置插件
// 用于压缩css代码new optimizeCssAssetsWebpackPlugin({cssProcessorPluginOptions: {presets: [default, { discardComments: { removeAll: true } }]},cssProcessorOptions: {map: {inline: false, // 不生成内联映射这样配置就会生成一个source-map文件annotation: true // 如果没有源映射就会生成一个注释}}})十七、压缩html
在插件HtmlWebpackPlugin中加入以下配置即可
new HtmlWebpackPlugin({template: ./src/index.html, // 指定要移动的html文件minify: { // 配置html压缩removeComments: true, // 移除注释collapseWhitespace: true, // 移除空格removeRedundantAttributes: true, // 移除多余的属性useShortDoctype: true, // 使用短的文档声明removeEmptyAttributes: true, // 移除空的属性removeStyleLinkTypeAttributes: true, // 移除style和link标签的type属性keepClosingSlash: true, // 保留闭合斜线minifyJS: true, // 压缩内联js代码minifyCSS: true, // 压缩内联css代码minifyURLs: true, // 压缩内联的url}})十八、完整的package.json依赖如下 dependencies: {babel/core: 7.7.2,babel/polyfill: 7.7.0,babel/preset-env: 7.7.1,babel-loader: 8.0.6,clean-webpack-plugin: ^3.0.0,core-js: 3.4.1,css-loader: 3.2.0,eslint: 7.32.0,eslint-loader: 4.0.2,file-loader: 4.2.0,html-loader: 0.5.5,html-webpack-plugin: 4.5.0,less: 3.10.3,less-loader: 5.0.0,mini-css-extract-plugin: ^0.8.0,optimize-css-assets-webpack-plugin: ^5.0.3,postcss-flexbugs-fixes: ^4.1.0,postcss-loader: ^3.0.0,postcss-normalize: ^8.0.1,postcss-preset-env: ^6.7.0,style-loader: 1.0.1,url-loader: 2.2.0,webpack: 4.41.2,webpack-cli: 3.3.10,webpack-dev-server: 3.9.0}
