一、 说点废话
1.webpack 是以 commonJS 的形式来书写脚本滴,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。
2.能被模块化的不仅仅是 JS 了。
3.开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等
二、 安装(首先你得知道npm包管理器?)
npm install webpack -g //全局安装
安装到项目目录(比如我的项目目录是e:\develop,命令行切换到该项目下)
npm init
npm install webpack --save-dev
webpack基础安装完成
三、开始管理我们的项目
首先需要在项目目录里创建一个配置文件,说白了就是运行任务文件!webpack.config.js,所有打包,模块化管理都必须基于这个文件配置
在使用中会用到并需要安装的一丢丢 Loader,什么是 Loader?就是比如说我们项目中用了sass这种编译文件,那么我们怎么使用webpack实现编译?那就要用到loader了!
我的理解就是:本身在安装webpack的时候除了内置的一丢丢工具,其实我们还需要好多其他工具,那么就是Loader了!!
如下总结了一些Loader:
//**用于独立打包css文件**
npm install --save-dev extract-text-webpack-plugin
//**babel es2015编译到es5 (babel-loader,babel-core,babel-preset-es2015)**
npm install --save-dev babel-loader
npm install --save-dev babel-core
npm install --save-dev babel-preset-es2015
//**es6安全使用脚架**
npm install --save-dev babel-polyfill
//**项目安装webpack-dev-server服务**
npm install --save-dev webpack-dev-server
//**全局安装webpack-dev-server服务**
npm install webpack-dev-server -g
//**项目安装html-webpack-plugin@2r服务**
npm install html-webpack-plugin@2 --save-dev
//
css-loader 处理css中路径引用等问题
style-loader 动态把样式写入css
sass-loader scss编译器
less-loader less编译器
postcss-loader scss再处理
url-loader 图片处理
file-loader 文件处理
ejs-loader ejs模版处理
webpack.config.js配置如下:
var webpack = require('webpack');
var path = require("path");
module.exports = {
//页面入口文件配置
//左边的为目标位置,右边为源文件位置
entry: {
"dev/build":__dirname+'/src/index.js',
},
//入口文件输出配置