webpack使用

最新推荐文章于 2024-01-20 11:48:04 发布

Sandy_Star

最新推荐文章于 2024-01-20 11:48:04 发布

阅读量731

点赞数 1

分类专栏：前端文章标签： webpack

本文链接：https://blog.csdn.net/weixin_48931875/article/details/119840888

版权

本文详细介绍了webpack的使用，从js文件打包、webpack配置，到css和图片的处理，再到es6转es5的babel配置，以及plugin的运用，包括添加版权、打包HTML和js压缩。最后讨论了如何利用webpack搭建本地服务器，实现自动刷新和SPA页面支持。

摘要由CSDN通过智能技术生成

一、js文件的打包

1、现在的js文件中使用了模块化的方式进行开发，他们不可以直接使用

因为如果直接在index.html中引入这两个js文件，浏览器并不识别其中的模块化代码
另外，在真实项目中有很多这样的js文件，这样一个个引用的话在后期不方便对他们进行管理

2、使用webpack工具，对多个js文件进行打包

webpack就是一个大包工具，他支持我们代码中写模块化，可以对模块化的代码进行处理
另外，如果在处理完所有模块之间的关系后，将多个js打包到一个js文件中，引入时就变得很方便了

在控制台输入webpack指令：

webpack src/main.js dist/bundle.js

意思是将src下的main.js文件打包到dist中的bundle.js中，这样在导入的时候就可以只导入bundle.js即可。

二、webpack的配置

webpack.config.js

const path = require('path')

module.exports = {
   
    //入口
    entry:'./src/main.js',
    //出口
    output:{
   
        path:path.resolve(__dirname,'dist'),    //这里要写绝对路径，要动态获取路径
        filename:'bundle.js'
    }
}

然后直接在命令行里输入 webpack 就可以打包了。

如果要将 webpack和 npm run build 联系起来，那么要写package.json文件中写入映射：

{
   
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
     //脚本
    "test": "echo \"Error: no test specified\" && exit 1",
    //在这里写入映射
    "build": "webpack"
  },
  "author": ""

最低0.47元/天解锁文章