Webpack打包工具安装使用介绍

最新推荐文章于 2023-06-19 09:40:16 发布

bugsayend

最新推荐文章于 2023-06-19 09:40:16 发布

阅读量538

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42707967/article/details/117170690

版权

本文介绍了Webpack的安装，依赖于Node.js环境。讲解了Webpack的模块化开发目录结构，重点在于webpack.config.js配置文件的使用，以及Webpack、Node.js和npm的关系。还涉及到CSS文件和图片资源的打包处理，以及如何将ES6语法转换为ES5。此外，文章还涵盖了在Webpack中集成Vue.js的配置和组件化开发的基础知识。

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

一.Webpack的安装

webpack安装依赖nodejs，下面介绍是基于系统已安装node.js
webpack3.6.0 是vue cli2脚手架依赖的版本
npm install webpack@3.6.0 -g(全局安装)

二.webpack模块化开发基本目录结构

下面是一个最基础的webpack目录结构
在这里插入图片描述
src 源代码放置目录
dist（distribution发布）代码发布目录

当进行模块化开发时，js代码之间有依赖（CommonJS或ES6模块化开发），我们可以将依赖的js文件打包成一个文件，然后在index.html引用打包后的文件

webpack .\src\main.js .\dist\boundle.js

三.使用webpack.config.js配置文件

webpack.config.js这个js文件就是打包时的配置文件，设置打包入口entry，和打包后代码存放的路径output等，如下是一个简单的配置

const path = require('path')

module.exports = {
   
    entry: './src/main.js',
    output: {
   
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: 'dist/',
    },
    module:{
   
        rules:[
            {
   
                test: /\.css$/i,
                use:['style-loader','css-loader']
                // css-loader只负责将css文件进行加载
                // style-loader负责将样式文件添加到DOM