【手动搭建项目】--------webpack---------【格尔尼卡ぃ】

weixin_33991727

于 2018-12-05 15:18:00 发布

阅读量55

点赞数

CC 4.0 BY-SA版权

文章标签： webpack 前端 ViewUI

原文链接：http://www.cnblogs.com/Guernicas/p/10071107.html

本文详细介绍了Webpack的基本概念，作为模块化打包器，它能将浏览器不识别的语法转换为可识别的格式。通过入口文件，Webpack查找所有依赖并使用Loader进行打包，最终生成一个或多个JS文件。文章还对比了Webpack与Gulp的区别，并提供了详细的安装步骤和配置教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是webpack?
            模块化打包器

            作用：将浏览器不识别的语法 转换成浏览器识别的语法

            工作流程：
                通过一个入口文件，找个这个入口文件所依赖的所有模块  通过loader进行打包，打包成一个或者多个js文件


            webpack vs  gulp  区别

            没有可比性
                模块打包机
                前端自动化工具 


           1、全局安装webpack
            cnpm install webpack@3.5.3 -g

           2、创建文件夹  初始化文件夹
                npm init -y

           3、局部安装webpack
                cnpm install webpack@3.5.3 --save-dev

            4、创建 webpack.config.js

            5、创建 src  dist  文件夹

            6、处理css的loader

               cnpm install --save-dev style-loader css-loader  sass-loader node-sass

            7、处理js的loader
                cnpm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react

            8、插件
                cnpm install html-webpack-plugin --save-dev

            9、热更新  服务器
                cnpm install webpack-dev-server@2 --save-dev

转载于:https://www.cnblogs.com/Guernicas/p/10071107.html