gulp与webpack都是基于nodejs的
1.webpack是什么
在某个文件夹下,shift+右键即可在此处打开命令窗口
webpack是近期最火的一款模块加载器兼打包工具,支持AMD/CMD的写法,处理依赖关系,然后解析出各模块之间的依赖,将代码打包,把各种资源都作为模块来使用和处理。它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等,能被模块化的不仅仅是 JS 了我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass)。
2.why要用webpack
页面中越来越多的js,客户端能做的事情越来越多,越来越多的的页面重载。这些现象导致了大量的前端代码,庞大的代码库需要高效的组织,而Module(组件式)开发的系统即为大多数开发者采取的途径。因为它将那么多文件打包成一个,减少请求次数,优化。开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。扩展性强,插件机制完善,特别是支持 React 热插拔(见 react-hot-loader )的功能让人眼前一亮。
3.webpack怎么用
1.首先安装node,会自带npm,(npm是nodejs包管理和分发工具)通过npm把想要的库下载到本地
2.全局安装webpack
npm install webpack -g 全局安装webpack,3.新建package.json文件即配置文件
在命令行对应的目录中输入 npm init即可创建配置文件4.作为项目的开发依赖(devDependencies)安装
npm install webpack –save-dev5.安装依赖 本地安装gulp插件
使用样式表.css文件需要 css-loader,style-loader加载器,加载其他需要对应的加载器,
通过npm install xxx –save-dev安装这些加载器。6.配置 新建webpack.config.js文件
每个项目下都必须配置有一个 webpack.config.js ,它的作用如同常规的 gulpfile.js/Gruntfile.js ,
就是一个配置项,告webpack 它需要做什么。7 引入
在入口文件例如 index.js中,通过require(),引入对应的需要打包的文件。
这样就可以在文件夹中直接通过webpack命令行 webpack来打包了。8.Webpack是在静态文件下打包的,若想在服务器下打包需要用到webpack-dev-server 它是个轻量级的服务器,修改文件源码后,自动刷新页面就能把修改同步到页面上。在文件下abc下 npm install webpack-dev-server –g,全局安装webpack服务,npm install webpack-dev-server –save-dev写进依赖,最后,这样之后就可以在浏览器中通过 loaclhost:8080打开页面了,即此时是在本地的服务器下打开的,不是在静态文件下打开的。使用命令行webpack-dev-server –hot –inline实现自动刷新,此时还需要将index.html中引入的入口输出文件的路径改下, 因为使用服务器打包时,打包后文件放在内存中。
9.运行webpack
webpack 的执行也很简单,直接执行
$ webpack –display-error-details
即可,后面的参数“–display-error-details”是推荐加上的,方便出错时能查阅更详尽的信息(比如 webpack 寻找模块的过程),从而更好定位到问题。
其他主要的参数有:$ webpack --config XXX.js
//使用另一份配置文件(比如webpack.config2.js)来打包$ webpack --watch
//监听变动并自动打包$ webpack -p
//压缩混淆脚本,这个非常非常重要!$ webpack -d
//生成map映射文件,告知哪些模块被最终打包到哪里了10.关于配置文件
- (1)配置下入口文件和入口文件输出,在module中配置对应的加载器,
{
entry: {
page1: "./page1",
//支持数组形式,将加载数组中的所有模块,但以最后一个模块作为输出
page2: ["./entry1", "./entry2"]
},
output: {
path: "dist/js/page",
filename: "[name].bundle.js"
}
}
来源: http://www.w2bc.com/Article/50764
entry 是页面入口文件配置,output是对应输出项配置,(即入口文件最终要生成什么名字的文件、存放到哪里)
上边的例子中,代码最终会生成一个page1.bundle.js和page2.bundle.js,
存放到./dist/js/page文件夹下。
(2)module.loaders是最关键的一块配置,它告知webpack每一种文件都需要用什么加载器来处理
extract-text-webpack-plugin
插件介绍:Extract text from bundle into a file.从bundle中提取出特定的text到一个文件中。使用 extract-text-webpack-plugin就可以把css从js中独立抽离出来
网上查了很多资料,都是以下是在 npmjs官网上搜该插件时的结果
var ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { module: { loaders: [ { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") } ] }, plugins: [ new ExtractTextPlugin("styles.css") ] } 来源: https://www.npmjs.com/package/extract-text-webpack-plugin
4.使用中的注意事项
照着配置一直不成功,需注意以下几点:
* a 虽然是css与js分离,仍然要将css或者scss文件引入到对应的入口文件
* b 我都是用scss写的代码,所以插件要用到scss里边,否则打包不成功。
即{test: /\.scss$/i,
loader:ExtractTextPlugin.extract('style-loader','css!sass')},
// 三个loader将scss文件转化为css文件,然后将css文件从js中抽取出来