首页 > 代码库 > webpac入门
webpac入门
基于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,在里面进行配置
webpac入门