教育网站案例,短视频营销系统,做网站0基础写代码,如何制作自己的公司网站好#xff0c;上一篇文章我们说了一下在react中怎么弄这个webpack#xff0c;那么现在在说一下不用react我们又该怎么配置#xff0c;这些呢也都是我自己通弄过看视频自己总结的#xff0c;拿来给大家分享一下。
前期准备条件
1、nvm#xff08;可以快速切换node版本上一篇文章我们说了一下在react中怎么弄这个webpack那么现在在说一下不用react我们又该怎么配置这些呢也都是我自己通弄过看视频自己总结的拿来给大家分享一下。
前期准备条件
1、nvm可以快速切换node版本
下载地址Releases · coreybutler/nvm-windows · GitHub
下载这两个nvm安装包其中一个即可。 解决下载速度慢的问题
nvm文件夹下的settings.txt文件复制进去镜像代码
node_mirrorhttps://npm.taobao.org/mirrors/node/
npm_mirror:https://npm.taobao.org/mirrors/npm/ pswebpack基于nodejsnodejs又基于commonjs。 webpack基本配置
webpack创建命令npx webpack init ./ --force --templatedefault
module项目中每一个文件可以理解成chunk打包后的文件叫module。
entry一个页面对应一个入口单页面只需要一个入口即可。
output打包之后的代码路径。打包完成后代码放在哪里
devServer开发环境配置。
mode‘production’设置生产环境。
plugins数组形式存放插件。
mini-css-extract-plugin使用这个插件可以打包出css文件。用于生产环境。
css-loader把css文件变成webpack自己认识的js。
style-loader把js变成style标签插入到页面中用于开发依赖。使用这个loader打包之后不出现css文件。
关于样式的loader从右向左读取。
配置css
配置css需要通过命令npm i postcss-loader --save-dev、npm i autoprefixer --save-dev进行下载postcss-loader和autoprefixer
postcss-loader只是一个编译平台并且需要下载autoprefixer插件还需要在src统计创建文件postcss.config.js代码如下
//postcss.config.jsmodule.exports {plugins: [require(autoprefixer)]
}
webpack.config.js文件代码如下
// Generated using webpack-cli https://github.com/webpack/webpack-cli
const MiniCssExtractPlugin require(mini-css-extract-plugin);
const path require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);
const WorkboxWebpackPlugin require(workbox-webpack-plugin);const isProduction process.env.NODE_ENV production;//核心
const config {entry: ./src/index.js, //入口文件output: {//代码生成路径path: path.resolve(__dirname, dist2),},devServer: {//本地开发环境open: true,host: localhost,},plugins: [//插件new HtmlWebpackPlugin({template: index.html,}),new MiniCssExtractPlugin(),// Add your plugins here// Learn more about plugins from https://webpack.js.org/configuration/plugins/],module: {//资源解析、编译rules: [{test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,type: asset,},{test: /\.css$/i,use: [MiniCssExtractPlugin.loader,css-loader,postcss-loader, //这是一个编译平台],},// Add your rules for custom modules here// Learn more about loaders from https://webpack.js.org/loaders/],},mode: production, //设置生产环境};module.exports () {if (isProduction) {config.mode production;config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());} else {config.mode development;}return config;
};我们可以利用postcss和autoprefixer自动给css样式添加前缀使得css样式在各种浏览器都兼容。 之后再次通过npx webpack build打包得到打包之后的css文件如下
/*!*******************************************************************************************************!*\!*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./index.css ***!\*******************************************************************************************************/
body{background: pink;
}.app{display: flex;transition: all 1s;-webkit-user-select: none;-moz-user-select: none;user-select: none;background: linear-gradient(to bottom,white,black);
}
那么如果你去使用css next怎么配置呢只需要改postcss.config.js文件的代码即可
//postcss-cssnext包含自动添加前缀功能module.exports {plugins: [// require(autoprefixer)require(postcss-cssnext)]
}
当然了记得安装npm i postcss-cssnext --save-dev 关于js部分的配置
Babel环境配置js
下载依赖npm install --save-dev babel/core babel/cli babel/preset-env Webpack.config.js中设置规则 {test: /\.js$/i,use:{loader: babel-loader,}}
为了能够编译jsx语法的代码还需要进行babel预设
在src文件夹同级创建babel.config.js文件,
{presets:[babel/preset-react]
}
同时下载依赖npm i --save-dev babel/preset-react
pspreset就是babel帮你准备好的可以直接使用的插件组合 html部分
首先安装插件npm i --save-dev html-webpack-plugin
package.config.js
const HtmlWebpackPlugin require(html-webpack-plugin); plugins: [new HtmlWebpackPlugin({template: index.html,}),
]
打包之后html文件多了两个标签一个script标签引入jslink引入css Pswebpack打包出来的script标签有defer
在 Webpack 打包过程中defer 和 async 是两种用于加载 JavaScript 文件的属性它们的用途和行为有所不同。以下是它们的详细说明和区别
defer 推迟
用途defer 属性用于告诉浏览器在文档解析完成后再执行脚本。执行顺序带有 defer 属性的脚本会按照它们在文档中的出现顺序依次执行。这意味着如果有多个带 defer 的脚本它们会按照它们在 HTML 中的顺序执行。适用场景适合需要在 DOM 完全加载后执行的脚本尤其是依赖于 DOM 元素的脚本。
async
用途async 属性用于告诉浏览器立即下载脚本但不等待文档解析完成就执行它。执行顺序带有 async 属性的脚本会在下载完成后立即执行而不考虑它们在文档中的顺序。这意味着如果有多个带 async 的脚本它们的执行顺序是不确定的取决于下载的速度。适用场景适合独立的脚本尤其是那些不依赖于其他脚本或 DOM 的脚本比如分析工具或广告脚本。
总结 执行时机 defer等到文档解析完成后执行。async下载完成后立即执行无需等待文档解析。 执行顺序 defer按照在文档中的顺序执行。async执行顺序不确定取决于下载速度。
使用示例
!-- 使用 defer --
script srcscript1.js defer/script
script srcscript2.js defer/script
!-- script1.js 和 script2.js 会按照顺序执行 --!-- 使用 async --
script srcscript1.js async/script
script srcscript2.js async/script
!-- script1.js 和 script2.js 的执行顺序不确定 --在使用 Webpack 打包时可以通过配置来指定这些属性以优化应用的加载性能。
对于devServer的设置
package.config.js
devServer: {//本地开发环境open: true,host: localhost,static:{directory: path.join(__dirname, public),},compress: true, //开启压缩port: 9000,},
调试
开发的时候需要设置成开发模式
mode: development, //设置开发环境
