webpack
webpack简单点来说就就是一个配置文件,所有的魔力都是在这一个文件中发生的。 这个配置文件主要分为三大块
entry 入口文件 让webpack用哪个文件作为项目的入口
output 出口 让webpack把处理完成的文件放在哪里
module 模块 要用什么不同的模块来处理各种类型的文件
html plugin: html-webpack-plugin
npm install html-webpack-plugin --save-dev
var path = require('path'); var HtmlwebpackPlugin = require('html-webpack-plugin'); //定义了一些文件夹的路径 var ROOT_PATH = path.resolve(__dirname); var APP_PATH = path.resolve(ROOT_PATH, 'app'); var BUILD_PATH = path.resolve(ROOT_PATH, 'build'); module.exports = { //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字 entry: APP_PATH, //输出的文件名 合并以后的js会命名为bundle.js output: { path: BUILD_PATH, filename: 'bundle.js' }, //添加我们的插件 会自动生成一个html文件 plugins: [ new HtmlwebpackPlugin({ title: 'Hello World app' }) ] };
webpack-dev-server: 当代码更新的时候自动刷新浏览器。
npm install webpack-dev-server --save-dev
module.exports = { .... devServer: { host: '127.0.0.1', port: '8099', historyApiFallback: true }, ... }
package.json 里面配置一下运行的命令,npm支持自定义一些命令
"scripts": { "start": "webpack-dev-server --hot --inline" }
添加css样式
现在来添加一些样式,webpack使用loader的方式来处理各种各样的资源,比如说样式文件,我们需要两种loader,css-loader 和 style-loader,css-loader会遍历css文件,找到所有的url(…)并且处理。style-loader会把所有的样式插入到你页面的一个style tag中。安装loader
npm install css-loader style-loader --save-dev
webpack.config.js中添加loaders
... module: { loaders: [ { test: /\.css$/, loaders: ['style-loader', 'css-loader'], include: APP_PATH } ] }, ...
看loaders的书写方式,test里面包含一个正则,包含需要匹配的文件,loaders是一个数组,包含要处理这些程序的loaders,这里我们用了css和style,注意loaders的处理顺序是从右到左的,这里就是先运行css-loader然后是style-loader.
sass-loader
npm install sass-loader node=sass --save-dev
webpack.config.js中添加loaders 删除css处理,添加下面代码
... module: { loaders: [ { test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'], include: APP_PATH } ] }, ...
处理图片和其他静态文件
安装loader,处理文件。诸如图片,字体等等,不过有个神奇的地方它可以根据你的需求将一些图片自动转成base64编码的,为你减轻很多的网络请求。
url-loader
npm install url-loader --save-dev
配置config文件 (后面那个limit的参数,当你图片大小小于这个限制的时候,会自动启用base64编码图片)
{ test: /\.(png|jpg)$/, loader: 'url?limit=40000' }
添加ES6的支持
装各种loader
npm install babel-loader babel-preset-es2015 --save-dev
配置config文件
... { test: /\.jsx?$/, loader: 'babel', include: APP_PATH, query: { presets: ['es2015'] } }, ...