Webpack的基本使用（不用脚手架）

最新推荐文章于 2023-12-24 20:46:26 发布

七律322

最新推荐文章于 2023-12-24 20:46:26 发布

阅读量157

点赞数 1

分类专栏： webpack 文章标签： vue.js

本文链接：https://blog.csdn.net/qilv1020/article/details/115983170

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了Webpack的基础作用、安装与版本管理，详细讲解了打包流程，包括npm run build与全局webpack的区别。还涵盖了CSS和LESS处理，通过loader实现不同格式文件的转换。适合开发者深入理解Webpack的工作原理。

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

一、webpack的作用

webpack可以帮助我们进行模块化，并且处理模块间的各种复杂关系。就是将各种资源模块进行打包合并成一个或多个包（Bundle）

二、webpack的安装

//全局安装
npm install webpack webpack-cli -g
//查看版本
webpack -v

三、打包

// webpack 和 npm run build 的区别
// webpack 无论再哪个终端输入，使用的都是全局下的 webpack 版本
// npm run build 会优先选择本地的 webpack  这里用开发依赖
 本地安装—开发依赖：npm install webpack@3.6.0 --save-dev (-D)  √
 本地安装—运行依赖：npm install webpack@3.6.0 --save (-S)

根目录下输入 npm init -y 生成 package.json 文件
修改 package.json ，scripts 对象里加入 "build":"webpack"
编写webpack.config.js 文件

//导入path模块
const path = require("path");

//JS打包规则
module.exports = {
    entry: './src/main.js', //入口文件    
    output: {
        path: path.resolve(__dirname, './dist'), //指令输出路径，__dirname是一个常量表示当前文件所在路径        
        filename: 'bundle.js' //输出的文件名称    
    }
}

开始打包
优先使用本地版本在开发环境构建一次 npm run build
使用全局版本在开发环境构建一次 webpack
构建并生成源代码映射文件 webpack -d
在生成环境构建，压缩、混淆代码，并移除无用代码 webpack -p
快速增量构建，可以和其他选项一起使用 webpack –watch
progress 显示打包过程中的进度，colors打包信息带有颜色显示 webpack –progress –colors

四、CSS文件的处理

webpack 本身只能处理 js 文件，而无法处理其他格式的文件，这就需要 loader 来帮忙转化
1.安装相关loader npm install --save-dev style-loader css-loader
2.在 webpack.config.js 中的 modules 下进行配置

//导入path模块
const path = require("path");

//JS打包规则
module.exports = {
    entry: './src/main.js', //入口文件    
    output: {
        path: path.resolve(__dirname, './dist'), //指令输出路径，__dirname是一个常量表示当前文件所在路径        
        filename: 'bundle.js' //输出文件的名称    
    },
    module: {
        rules:[{
            test:/\.css$/,  //把项目中所有.css结尾的文件进行打包
            use:["style-loader","css-loader"] //顺序很重要！ 不能改变顺序  这里是从右向左读
        }]
    }
}

五、less的处理

1.安装相关loader npm install less-loader --save-dev
2.在 webpack.config.js 中的 modules 下进行配置

//导入path模块
const path = require("path");

//JS打包规则
module.exports = {
    entry: './src/main.js', //入口文件    
    output: {
        path: path.resolve(__dirname, './dist'), //指令输出路径，__dirname是一个常量表示当前文件所在路径        
        filename: 'bundle.js' //输出文件的名称    
    },
    module: {
        rules:[{
            test:/\.css$/,  //把项目中所有.css结尾的文件进行打包
            use:["style-loader","css-loader"] //顺序很重要！ 不能改变顺序  这里是从右向左读
        },
        {
            test:/\.less$/,  
            use:[{
                loader:"style-loader"
                },{
                loader:"css-loader"
                },{
                loader:"less-loader"
                }] 
        }]
    }
}