webpack打包发布~

1、安装webpack(局部安装webpack)。

javascript 复制代码
npm i webpack webpack-cli -D

2、安装成功之后,你会在package.json文件中看到这个。

3、新建webpack.config.js文件,里面写配置编译模式,入口出口等(这里演示的是单入口打包)

javascript 复制代码
// 导入node.js中专门操作路径的模块
const path = require('path');
module.exports={
    // 编译模式:开发阶段(production上线模式)
    mode:'development',
    // 入口
    // __dirname:表示项目所在目录的根路径。
    entry: path.resolve(__dirname, 'src/index.js'),    
    // 出口
    output: {        
        path: path.resolve(__dirname, 'dist'),
        // 输出文件名称     
        filename: 'bundle.js',  
        // publicPath:指定基础路径,开发环境一般是项目的根路径,上线之后一般是CDN的路径。      
        publicPath: './'    
    }
}

4、在package.js中配置打包命令。(不加 --mode development,默认打包是生产环境,打包出来的代码会默认压缩)

javascript 复制代码
"build": "webpack --mode development",

5、打包成功。此时你的项目中会多出一个dist文件。里面是打包好的js文件。

6、最后需要了解webpack支持配置多入口及多出口文件。并且webpack默认只能打包处理.js结尾的模块。所以正对非.js文件,比如css,less等文件需要安装对应的loader并配置loader规则。

6.1打包处理css文件。

安装css的loader。

javascript 复制代码
npm i style-loader css-loader -D

在webpack.config.js文件中配置loader规则:

javascript 复制代码
// 导入node.js中专门操作路径的模块
const path = require('path');
module.exports={
    // 编译模式:开发阶段(production上线模式)
    mode:'development',
    // 入口
    // __dirname:表示项目所在目录的根路径。
    entry: path.resolve(__dirname, 'src/index.js'),    
    // 出口
    output: {        
        path: path.resolve(__dirname, 'dist'),
        // 输出文件名称     
        filename: 'bundle.js',  
        // publicPath:指定基础路径,开发环境一般是项目的根路径,上线之后一般是CDN的路径。      
        publicPath: './'    
    },
    // 配置loader规则
    rules:[
        // 配置css文件的loader规则
        {test:/\.css$/,use:['style-loader','css-loader']},
        // 配置less文件的loader规则
        {test:/\.less$/,use:['style-loader','css-loader','less-loader']}
    ]
}

7、针对高级js语言兼容低版本浏览器,需要安装babel。

相关推荐
温柔53292 分钟前
仓颉语言异常捕获机制深度解析
java·服务器·前端
温宇飞10 分钟前
ECS 系统的一种简单 TS 实现
前端
shenshizhong12 分钟前
鸿蒙HDF框架源码分析
前端·源码·harmonyos
有点笨的蛋15 分钟前
从零构建你的 AIGC 后端:pnpm + dotenv + OpenAI SDK 的现代工程实践
人工智能·node.js
凌晨起床20 分钟前
Vue3 对比 Vue2
前端·javascript
clausliang24 分钟前
实现一个可插入变量的文本框
前端·vue.js
yyongsheng24 分钟前
SpringBoot项目集成easy-es框架
java·服务器·前端
fruge1 小时前
前端工程化流程搭建与配置优化指南
前端
东芃93941 小时前
uniapp上传blob对象到后台
前端·javascript·uni-app
coding随想1 小时前
救命!网页还在偷偷耗电?浏览器Battery API事件教你精准控电,这5个场景用了都说香
前端