我们实现功能丰富的应用，拥有复杂的js代码和一大堆依赖包，模块化，less等css预处理。
这些改进确实大大提供了我们开发效率，但是利用他们的开发的文件我们需要额外的处理才能让浏览器识别，手动处理非常复杂，这就为webpack类的工具提供了需求；
1、什么是webpack？
webpack可以看做模块打包机，它做的事情是分析你的项目结构，找到js模块和预设的css，打包为合适的格式以供浏览器使用；
webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（main.js）,
webpack将冲这个文件中找到这个项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器能识别的JavaScript文件；
2、开始使用webpack
安装：
npm install webpack -g
npm install webpack --save-dev //安装到你的项目中
更快捷的执行打包任务：
对其配置可以使用简单的npm start命令来代替，在package.json中对npm的脚本进行
设置如下：
{
“name”：“”，
“scripts”：{
“start”：“webpack”相当于npm start命令执行npm webpack命令
}
}
在package.json中的脚本部分已经默认在命前面添加了node_modules/.bin路径，
所以无论全局是否安装webpack，在终端都不需要在前面添加详细的路径；
npm的start是一个特殊的脚本名称，在命令行中可以直接使用npm start；
如果你在scripts中配置的不是start，想要在命令行中执行，需要用npm run {scripts name}
比如你配置的是build，需执行命令 npm run bulid；
3、webpack的强大功能
生成 source maps（便于调试）
打包后的文件我们是不容易找到出错地方的，使用source maps帮我们解决此问题；
通过配置，webpack在打包的时候可以为我们生成 source maps，为我们提供一个
对应编译文件和源文件的方法，使编译后的代码可读性高，便于调试；
在webpack的配置文件中配置source maps，需要配置devtool，他有四中不同的配置选项；如下：
在学习阶段以及小到中性的项目上，eval-source-map使用还是比较好的，
但是只能在开发阶段使用它，配置如下
devtool: "eval-source-map"
4、使用webpack构建本地服务器：
浏览器检测代码修改，浏览器时时刷新，webpack提供了一个可选的本地开发服务器；
这个本地服务器基于nodejs构建， 它是一个单独的组件，
在webpack中进行配置之前需要单独安装它作为项目的依赖；
npm install webpack-dev-server --save-dev
webpack 中devserver配置选项
contentBase：默认webpack-dev-server依赖包为为根文件提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应其在这里设置（设置到public目录下）；
port：设置默认监听端口，如果省略，默认是8080
inline：设置为true，当源文件修改时会自动刷新页面；
colors：设置为true，使终端输出的文件为彩色的；
historyApiFallback ：在开发单页面应用非常有用，它依赖于html5 history api，设置未true，所有的跳转将指向index.html；
devServer: {
contentBase: './public',//温蒂服务器所加载页面的目录；
colors: true,//终端输入结果为彩色
inline: true//实时刷新
}
5.loaders：webpack打包处理器
loaders是webpack激动人心的功能，通过使用不同的loader，webpack通过调用调用外部的脚本或者工具可以对各种各样的文件进行处理，比如说分析json文件并把ta转化为js文件，或者把下一代js文件（es6，es7）转化为现代浏览器可以识别的js文件，或者说对react开发而言，合适的loaders可以把react的jsx文件转化为js文件；
loaders需要单独安装并且自webpack.config.js 下的module关键字进行配置，loadeers的配置选项包括如下：
test：一个匹配loaders处理的文件正在表达式；（必须）
loader：loader的名称（必须）
include/exclude 手动添加必须处理的文件（文件夹）/屏蔽不需要处理文件或者文件夹（可选）；
query：为loaders提供额外的设置选项（可选）；
loaders很好，不过有点loaders使用起来比较复杂，不如说babel；
5.1 babel
babel其实是一个编译JavaScript的平台，它的强大之处是通过编译达到以下目的：
--处理JavaScript的es6，es7，被浏览器所识别；
--使用基于JavaScript，处理react的jsx；
babel的安装和配置：
babel是几个模块的包，其核心位于称为babel-core的npm包中，不过webpack把他们整合在一起使用，但是对于每一个你单独使用的功能和扩展，你需要单独安装包（比如用的比较多的解析es6的babel-preset-es2015包和解析react的jsx的babel-preset-react包）
我们可以一次性安装多个依赖的模块，之间用空格隔开：
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react
module: {
loaders: [
{
test: /\.json$/,
loader: "json"
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',//在webpack的module部分的loaders里进行配置即可
query: {
presets: ['es2015','react']
}
}
]
},
配置好webpack现在就可以运行使用es6和jsx的语法了，用上面的进行测试，要使用react，必须先安装react和react-dom；
6.一切皆为模块：
webpack有一个不可不说的优点，它把所有的文件都可以当做模块处理，包括你的JavaScript文件，
css，fonts以及图片都可以通过合理的loaders进行模块化处理；
7. css
webpack提供两个工具处理样式表，css-loader和style-loader，两者任务不同，css-loader使你能够使用类似@import和url的方法实现require的功能，style-loader将所有计算后的样式加入页面，两者使用让你把样式嵌套于到webpack打包后的js文件中；
安装：
npm install css-loader style-loader --save-dev
通常的情况下。css和js会打包到一个文件中，css并不会打包为一个独立css文件，不过可以通过合适的webpack配置也可以把css打包一个单独的文件；
7.1 css 预处理器
css的处理平台postcss，他可以帮助你你的css实现更多的功能；
如何使用PostCss，我们使用postcss为css代码处理自动添加适应不同浏览器的css前缀；
首先安装postcss-loader和autoprefixer（自动添加前缀的插件）
npm install postcss-loader autoprefixer
在webapck配置文件中进行配置，只需要新建一个postcss关键字。并在里面申明依赖的插件，
postcss: [
require('autoprefixer')//调用autoprefixer插件
],
到现在，本文已经涉及到处理js的babel和处理css的postcss，他们是两个单独的平台，
8. plugins （插件）
plugins是用来扩展webpack功能的，他会在整个构建过程生效；
loaders和plugins区别：
loaders是webapck进行打包构建过程中对源文件（css，js，jsx，less）进行处理，一次处理一个，
plugins并不是直接操作单个文件，它直接对整个构建过程起作用；
使用插件的方法：
要是用摸个插件，我们需要用npm install 安装它，然后要做的就是webpack配置中的plugins关键字中添加插件的一个实例（plugins是一个数组），下面例子，我们添加了一个实现版权声明的插件
plugins: [
new webpack.BannerPlugin("Copyright Flying Unicorns inc.")//在这个数组中new一个就可以了
],
8.1 几个常用的插件
--- HtmlWebpackPlugin：
这个插件的作用是依据一个简单的模板，帮你生成最终的h5文件，这个文件中自动引用了你打包后的
js文件，每次编译都在文件名插入一个不同的哈希值；
npm instal --save-dev html-webpack-plugin
这个插件完成了我们之前手动完成的一些事情，
--- Hot Module Replacement
常见的webpack配置文件
var webpack = require('webpack');
var htmlWebPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: __dirname+ '/app/main.js',
output: {
path: __dirname+'/bulid.js',
filename: '[name]-[hash]..js'
},
module: {
loaders: [
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.js$/,
exclude:/node_modules/,
loader: 'babel'
},
{
test: /\.css/,
loader: ExtractTextPlugin.extract('style', 'css?modules!postcss')
}]
},
postcss: [
require('autoprefixer')
],
plugins: [
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html"
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin("[name]-[hash].css")
]
}
网友评论