山西建设厅网站2016年3号,wordpress插件不显示,搭建网站什么意思,蚌埠网站建设费用1.生产模式介绍
生产模式是开发完成代码后#xff0c;我们需要得到代码将来部署上线。
这个模式下我们主要对代码进行优化#xff0c;让其运行性能更好。
优化主要从两个角度出发:
优化代码运行性能优化代码打包速度
2.生产模式准备
我们分别准备两个配置文件来放不同的…1.生产模式介绍
生产模式是开发完成代码后我们需要得到代码将来部署上线。
这个模式下我们主要对代码进行优化让其运行性能更好。
优化主要从两个角度出发:
优化代码运行性能优化代码打包速度
2.生产模式准备
我们分别准备两个配置文件来放不同的配置 ├── webpack-test (项目根目录)├── config (Webpack配置文件目录)│ ├── webpack.dev.js(开发模式配置文件)│ └── webpack.prod.js(生产模式配置文件)├── node_modules (下载包存放目录)├── src (项目源码目录除了html其他都在src里面)│ └── 略├── public (项目html文件)│ └── index.html├── .eslintrc.js(Eslint配置文件)├── babel.config.js(Babel配置文件)└── package.json (包的依赖管理配置文件) 3.创建config文件夹来管理不同的config文件 注意此时要修改生产模式配置中output中的path的路径因为这个路径是绝对路径会收到当前文件所处文件夹路径的影响 在开发模式的配置中可以不用定义output中的path因为开发模式不会产生输出但filename需要指定 然后修改所有绝对路径 然后修改所有绝对路径 生产模式还需要将mode改成production并去除devServer配置这样才能输出文件 const path require(path);//nodejs用来处理路径问题的模块
const ESLintPlugin require(eslint-webpack-plugin);
const HtmlWebpackPlugin require(html-webpack-plugin);
const WebpackDevServer require(webpack-dev-server);
module.exports {/**入口 */entry: ./src/main.js,/**输出 相对路径*/output: {/**文件输出路径 绝对路径*///__dirname 表示当前文件的文件夹目录path: path.resolve(__dirname, ../dist),//所有文件的输出目录/**文件名 */filename: static/js/dist.js,//入口文件输出文件名clean: true,//在打包前将path整个目录内容情况},/**加载器 */module: {rules: [//loader的配置{/**test 代表要检测的文件 */test: /\.css$/, //只检测.css文件use: [style-loader, css-loader],//对检测到文件使用哪些loader},{test: /\.less$/,//只检测.less文件//loader:xxx,loader只能使用一个loaderuse可以使用多个loaderuse: [style-loader, css-loader, less-loader],//对检测到文件使用哪些loader},{test: /\.s[ac]ss$/,//只检测.sass文件use: [style-loader, css-loader, sass-loader],},{test: /\.styl$/,//只检测.stylus文件use: [style-loader, css-loader, stylus-loader]},{test: /\.(png|jpe?g|gif|webp)$/,type: asset/resource,parser: {dataUrlCondition: {//小于10kb的图标转base64减少请求数量maxSize: 10 * 1024 // 10kb}},generator: {//输出图片名称//[hash:10]hash值取前10位filename: static/imgs/[hash:10][ext][query]}},/**图标字体相关配置 */{test: /\.(ttf|woff2?|mp3|mp4|avi)$/,//只对ttf、woff2资源起作用type: asset/resource,//加上/resource表示将资源原封不动的打包出来generator: {filename: static/media/[hash][ext][query]}},{test: /\.js$/,/**排除哪些文件 */exclude: /(node_modules)/,loader: babel-loader,// options: {// presets: [babel/preset-env],// },},]},/**插件 */plugins: [//plugin配置new ESLintPlugin({/** 检测哪些文件 */context: path.resolve(__dirname, ../src)}),new HtmlWebpackPlugin({/**模板 */template: path.resolve(__dirname, ../src/public/index.html)})],/**模式 */mode: production
}
4.执行命令运行配置进行打包
npx webpack serve --config ./config/webpack.dev.js 可以看到开发模式下不会有输出文件
npx webpack --config ./config/webpack.prod.js 可以看到生产模式下会有输出
注意生成模式的命令不要带serve
同时可以看到生产模式下打包后的js文件也被压缩了 5.配置脚本简化指令
修改package.json添加脚本启动指令
