webpac入门

Posted 2020-09-26 行动派

基于node环境，必须确保node已经安装：node-v，npm-v

基础入门

前身：browserify

缺点：只能转化JS

webpack作用：一切都是模块化（js、css图片等），一个模块加载器、打包工具

安装webpack

流程：

　1.安装webpack命令环境

　　npm install webpack -g

　验证：

　　webpack -- version

　2.package.json 工程文件（需要依赖模块、库描述、版本、作者） 

　　npm init

　3.安装本地webpack

　　npm install webpack -D

案例：http://www.runoob.com/w3cnote/webpack-tutorial.html

　　webpack entry.js bundle.js

webpack加载器

webpack默认只支持javascript文件，其他文件需要加载器（loader），loader类似一种转化器。

　　css文件：style-loader、css-loader

　　下载：npm install style-loader  css-loader -D

注意：多个loader加载，用！进行连接

配置webpack.config.js

作用：配置一些webpack需要的入口、出口、loader

终端执行：webpack

其他：webpack    开发环境下编译打包

　　 　webpack -p   生产环境下编译（打包）

　　　 webpack -w  监听文件改动，自动编译（速度快）

　　　 webpack -d  开启（生成）source map  （显示出未编译的原文件，方便调试）

　　　webpack -pwd 

官方建议使用webpack.config.js，如果自己定义名字为config.js

　　终端执行： webpack --config config.js

ES6：babel转化

　　babel使用：npm install babel-loader babel-core babel-preset-es2015 -D

　　配置babel预设：

　　1.webpack.config.js(不推荐)

　　　　babel:{

　　　　　　"presets":[‘2015‘]

　　　　}

　　2.新增一个文件.babelrc,在里面进行配置