前端webpack打包配置

最近在学习webpack打包，顺便做了一下笔记用来总结.后续继续补充

对项目进行初始化生成package.json文件

 npm init -y

通过npm或cnpm下载webpack打包工具以及ts->js转换器

cnpm i -D webpack webpack-cli typescript ts-loader

创建webpack.config.js文件并且进行ts的相关配置

//引入一个包
const path = require('path');module.exports = {//入口文件entry: "./src/index.ts",//打包输出路径output:{path: path.resolve(__dirname,'dist'),filename: "bundle.js",},//打包的模块 module:{//指定加载规则rules:[{//匹配规则test: /\.ts$/,//use从后往前加载use: ['ts-loader'],//不参与编译的模块exclude: /node_modules/}]}
}

通过npm下载能将ts转化为html文件的插件 html-webpack-plugin ，并且在webpack.config.js中配置

cnpm i -D html-webpack-plugin

const HTMLWebpackPlugin = require('html-webpack-plugin');module.exports = {//入口文件entry: "./src/index.ts",//打包输出路径output:{},//打包的模块 module:{//指定加载规则rules:[]},//配置插件 plugins:[// new HTMLWebpackPlugin({//   title:  '自定义函数'// })// new CleanWebpackPlugin(),new HTMLWebpackPlugin({template: './src/index.html'})],
}

通过npm 下载能对js代码进行兼容性打包的babel模块，并且在webpack.config.js中配置

cnpm i -D @babel/core @babel/preset-env babel-loader core-js

//打包的模块 module:{//指定加载规则rules:[{test: /\.ts$/,//use从后往前加载use: [//配置babel// 'babel-loader',{//指定加载器loader: 'babel-loader',//设置babeloptions:{//设置定义的环境presets:[[//指定环境的插件"@babel/preset-env",//配置信息{//要兼容的目标浏览器targets:{"chrome":"88","ie":  "11"},//指定的core.js版本"corejs": "3",//使用core.js的方式--按需加载"useBuiltIns": "usage"}]]}},'ts-loader'],exclude: /node_modules/}]},

在packjson中配置打包命令 npm run build--自动在dist文件夹生成bundel.js文件和html文件 npm start--打开的html文件实时更新ts中的打包内容,类似于vue项目的npm run serve。

{"name": "03webpacktest","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack --mode production","start": "webpack serve --open --mode production"},"keywords": [],"author": "","license": "ISC","devDependencies": {"@babel/core": "^7.18.5","@babel/preset-env": "^7.18.2","babel-loader": "^8.2.5","core-js": "^3.23.3","html-webpack-plugin": "^5.5.0","ts-loader": "^9.3.1","typescript": "^4.7.4","webpack": "^5.73.0","webpack-cli": "^4.10.0"}
}

补充：ts配置文件生成以及less加载器的配置

ts配置文件生成命令

tsc -init{"include":{},"compilerOptions": {"target": "es2016", "module": "es2016","strict": true,}
}

下载less包的命令

npm i -D less less-loader css-loader style-loader

下载使css兼容不同老旧浏览器的包postcss

npm i -D postcss postcss-loader postcss-preset-env

配置less加载器以及兼容加载器postcss

//设置less文件的处理{test: /\.less$/,use:["style-loader","css-loader",//引入postcss{loader: "postcss-loader",options:{postcssOptions:{plugins:[["postcss-preset-env",{browsers: 'last 2 version'}]]}}},"less-loader"]}

前端webpack打包配置相关推荐

vue-cli+webpack打包配置
vue-cli+webpack打包配置一: 目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── ut ...
webpack打包配置
在网页中会引用那些常见的静态资源? js .js .jsx .coffee .ts(Typescript 类 C#语言) css .css .less .sass .scss images .jpg ...
webpack 打包配置
代码示例 webpack.config.js // 引入 path 为了使用 join 方法 const path = require('path')// webpack 插件 // clean-we ...
vue.config.js配置，webpack打包配置详解
注意: vue-cli3 脚手架搭建完成后,项目目录中没有 vue.config.js 文件,需要手动创建第一步:手动创建vue.config.js文件, 一般放在和package.json同级目录 ...
vue项目webpack打包配置
基于vue/cli3.0+脚手架搭建Vue项目(12) 文章目录基于vue/cli3.0+脚手架搭建Vue项目(12) 前言一.webpack配置 1.配置vue.config.js 2.配置Dl ...
webpack基本打包配置流程
项目搭建以及webpack打包配置流程创建文件夹EC(文件夹和文件名根据需求自定义) 在EC文件夹下新建文件夹APP 在APP文件夹下新建入口文件index.js 和运行该入口文件的index.ht ...
建立项目的webpack简单配置
实战项目中的 Webpack 配置: 说明:以下命令通过 Git Bash 执行 1.建立webpack-demo文件夹及npm初始化 Administrator@PC-20170414ZFJO MI ...
webpack打包优化_前端性能优化：webpack性能调优与Gzip原理
链接:https://juejin.im/book/5b936540f265da0a9624b04b 从输入 URL 到显示页面这个过程中,涉及到网络层面的,有三个主要过程: DNS 解析 TCP 连 ...
webpack从入门到精通（四）优化打包配置总结①
1. HMR HMR 即模块热替换(hot module replacement)的简称,当你对代码进行修改并保存后,webpack 将对代码重新打包,并将新的模块发送到浏览器端,浏览器通过新的模块替 ...

前端webpack打包配置

最近在学习webpack打包，顺便做了一下笔记用来总结.后续继续补充

补充：ts配置文件生成以及less加载器的配置

前端webpack打包配置相关推荐

最新文章

热门文章