标签：文件 js webpack 打包 loader css
webpack前端工程化的具体解决方案
功能:前端模块化开发,代码压缩,处理浏览器端js的兼容 ,性能优化
基本使用:
安装
npm i webpack@5.42.1 webpack-cli@4.7.2 -D
-S 是--save 开发上线都要使用 安装到package.js里的dependencies
-D 是--save-dev 开发使用 安装到package.js里的devDependencies
创建
在根目录下创建webpack.config.js文件 // 使用node.js中的导出语法,向外导出一个webpack的配置对象module.exports = {
//mode用来指定构造模式 可选development(开发模式) production(上线模式)
mode:'development'
}
development(开发模式):时间快,体积大
production(上线模式):时间慢,体积小
//在package.json的script节点下,新增dev脚本
运行 npm run dev
在npm run dev时候先去读取webpack.config.js文件.然后再去执行webpack
如果要压缩的话上面的两项直接选择上线模式
webpack中的打包默认约定
在4.x和5.x中默认约定: 打包入口文件:src->index.js 输出文件路径:dist->main.js 修改打包入口文件,直接去webpack的配置文件里: const path=require('path') module.exports = { mode:'development', // entry:'指定要处理哪个文件' entry: path.join(__dirname, './src/index1.js'), // output:'输出文件存放路径' output: { path: path.join(__dirname, 'ssss'), filename:'bundle.js' } }path.join()是拼接路径
__dirname正在执行的文件的目录的绝对路径
wabpack插件
webpack-dev-server 会启动一个实时打包的http服务器安装
cnpm i webpack-dev-server@3.11.2 -D 配置
然后重新打包npm run dev
html里的引用
<!-- 加载和引用内存里的js -->
<script src="/main.js"></script>
html-webpack-pluagin 插件
将index.html文件复制一份直接放到内存里
//0.安装
npm i html-webpack-plugin@5.3.2 -D
const HtmlPlugin = require('html-webpack-plugin')
//2.创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
template: './src/index.html',//指定源文件的存放路径
filename:'./index.html',//指定生成文件的存放路径
})
module.exports = {
mode: 'development',
plugins: [htmlPlugin],//3.通过plugins节点,使htmlPlugin插件生效
}
它还可以在内存里自动添加js文件
devServer的配置
module.exports = {
mode: 'development',
plugins: [htmlPlugin],//通过plugins节点,使htmlPlugin插件生效
//配置服务器
devServer: {
open: true,//初次打包完成后,自动打开默认浏览器
//在http的协议中如果端口号80,则可以被省略
port: 80,//配置端口号
host:'127.0.0.1',//指定运行的地址
}
}
loader
1.webpack只能处理打包.js后缀的文件,处理不了其他后缀的文件 2.当代码中有index.css文件,无法处理 3.当webpack发现某个文件处理不了的时候,会查找webpack.config.js文件,
看module.rules数组中,是否配置了对应的loader加载器
4.webpack把index.css文件,先转交给最后一个loader处理(css-loader)
5.css-loader处理完后,会把结果给下一个loader(style-loader)
6.当style-loader处理完了,没有loader文件了,就把结果交给webpack
7.webpack会把结果进行打包合并
安装
cnpm i style-loader@3.0.0 css-loader@5.2.6 -D
配置:
module: {
rules: [
//定义了不同模块对应的loader
{ test: /\.css$/, use: ['style-loader','css-loader']}
]
}
打包处理less
安装:
npm i less-loader@10.0.1 less@4.1.1 -D
配置:
{
test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']
}
base64图片
img 标签是先拿标签,在去请求地址
优点:不用加载两次,
缺点:图片增大(不适合大图片,只适合小图片)
安装:
cnpm i url-loader@4.1.1 file-loader@6.2.0 -D
配置:
// 处理图片文件base64字符串 {
test: /\.jpg|png|gif$/, use: 'url-loader? limit=3000&outputPath=images'
}
limit是控制图片转换base64大小的,如果大于这个值就不转换,小于就转换
outputPath 是打包后的文件存放地址
js高级语法打包
安装:
cnpm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
配置:
{
test: /\.js$/, use: 'babel-loader',exclude:/node_modules/
}
exclude:是不包括
// 使用babel-loader处理高级的JS语法
// 在配置babel的时候,程序员值需要把自己的代码进行转换即可,一定要排除node_modules目录中的第三方包
//因为第三方包中的js兼容性,不需要程序员关心
然后创建一个babel.config.js文件 里面的配置项为:
module.exports = {
plugins: [['@babel/plugin-proposal-decorators'],{legacy:true}]
} 打包发布
在package.js文件中添加build配置:
"scripts": {
"dev": "webpack serve ", //serve是在内存上
"build": "webpack --mode production" //在物理磁盘上
},
--mode优先级高,prodction是生产模式
每次打包自动清理以前的文件
clean-webpack-plugin包
给文件配置别名
resolve: {//解析
alias: {//别名
'@':path.join(__dirname,'./src/')
}
}
标签：文件,js,webpack,打包,loader,css 来源： https://www.cnblogs.com/jingxin01/p/16436141.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。