前言:css
本套教程是零基础学打包工具webpack; 后面会结合gulp+webpack搞定全部你得需求;
闲谈:html
百度搜了一下,虽然教程多,可是杂乱无章,实用的没多少,都是匆匆了事,因此我就本身学了两天,如今从最底层教你们完成webpack的经常使用功能,后期我会再写一篇gulp+webpack的前端神器文章,但我也要学好了再给你们发^_^!
nodejs安装:前端
1.https://nodejs.org/en/download/ 选择对应本身的下载安装,命令行工具测试node -v是否成功;
smart-npm优化下载速度:node
2.安装完node后再测试一些 npm -v 命令是否成功,因为npm链接外网会常常下载插件会卡,推荐你们使用smart-npm; 在CMD命令窗口中输入:npm install --global smart-npm@1 --registry=https://registry.npm.taobao.org/ 安装完成后会自动替换当前npm,这时候你再试试安装其余的插件是否是很快了^_^?!
webpack全局安装:jquery
3.CMD命令窗口中输入:npm install -g webpack
新建项目:webpack
4.新建文件夹命名为webpack,若是你创建在D:test/webpack 在cmd命令窗口依次输入d: 、cd test 、 cd webpack 如今咱们已经进入咱们新建的webpack文件夹输入:
一直按回车;完成后如今项目里面就有一个package.json, 咱们多加一点东西;创建如下文件:es6
/app index.js pro.js package.json webpack.config.js
添加了两个js文件,添加了最重要的webpack->webpack.config.js的配置文件(文件名字不能更改),咱们仍是从简单的hello world开始吧,webpack原生直接支持AMD和CommonJS两种模块;web
JS代码ajax
pro.jsnpm
//咱们这里使用CommonJS风格
function generateText() { var element = document.createElement('h2'); element.innerHTML = "Hello h2 world"; return element; } module.exports = generateText;//module.exports这个函数会把generateText方法暴露给全局在其余js中就能够引用了, exports至关于导出,后面index.js中的require就是导入;
index.js
var pro = require('./pro');//填写模块路径,导入文件后缀的js能够省略。 var app = document.createElement('div'); app.innerHTML = '<h1>Hello World</h1>'; app.appendChild(pro()); document.body.appendChild(app);
以上代码功能很简单,就是把pro.js定义为一个模块,在index.js中引用,最终两文件中要添加的内容都显示在index.html中。
配置Webpack
如今开始配置webpack,目标是把这两个js文件合并成一个文件. 咱们能够本身在build文件夹里面手动建一个index.html文件夹,而后再把合并之后的js引用在里面,可是这样有些麻烦,因此咱们这里安装一个plugin,能够自动快速的帮咱们生成HTML。
npm install html-webpack-plugin --save-dev
好 有了这个插件 开始写webpack.config.js文件
var path = require('path');//node 引入自带方法 var HtmlwebpackPlugin = require('html-webpack-plugin'); //定义了一些文件夹的路径 var ROOT_PATH = path.resolve(__dirname);//__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' }) ] };
而后在项目根目录运行
D:\test\webpack>webpack
终端显示一堆信息,而后告诉你成功了。
你可使用webpack --help看看一些运行的时候可选的参数
你会发现多出来一个build文件夹,直接点开里面的html文件,你会发现咱们可爱的“hello world”已经插入到页面了。咱们的任务完成了,成功生成html,合并js,html引入了js,js被执行了。
配置webpack-dev-server
上面任务虽然完成了,可是咱们要不断运行程序而后查看页面,因此最好新建一个开发服务器,能够serve咱们pack之后的代码,而且当代码更新的时候自动刷新浏览器。
安装webpack-dev-server
npm install webpack-dev-server --save-dev
安装完毕后 在webpack.config.js中添加配置
module.exports = { .... devServer: { historyApiFallback: true, hot: true, inline: true, progress: true, } ... }
而后再package.json里面配置一下运行的命令,npm支持自定义一些命令
... "scripts": { "start": "webpack-dev-server --hot --inline" }, ...
好了,在项目根目录下输入npm start,一堆信息后server已经起来了,在浏览器里面输入http://localhost:8080 发现伟大的hello world出现了,在js里面随便修改一些输出而后保存, 浏览器自动刷新,新的结果出现了。
添加CSS样式
如今来添加一些样式,webpack使用loader的方式来处理各类各样的资源,好比说样式文件,咱们须要两种loader,css-loader 和 style-loader,css-loader会遍历css文件,找到全部的url(...)而且处理。style-loader会把全部的样式插入到你页面的一个style标签中。
安装咱们的loader
npm install css-loader style-loader --save-dev
配置loader,在webpack.config.js中
devServer: { historyApiFallback: true, hot: true, inline: true, progress: true, }, ... module: { loaders: [ { test: /\.css$/, loaders: ['style', 'css'], include: APP_PATH } ] }, ... plugins: [ new HtmlwebpackPlugin({ title: 'Hello World app' }) ]
看loaders的书写方式,test里面包含一个正则,包含须要匹配的文件,loaders是一个数组,包含要处理这些程序的loaders,这里咱们用了css和style,注意loaders的处理顺序是从右到左的,这里就是先运行css-loader而后是style-loader.
新建一个样式文件 main.css
h1 { color: red; }
记得在入口文件index.js中引用
require('./main.css');
而后发现标题变成红色的了,webpack的理念是基于项目处理的,把对应的文件格式给对应的loader处理,而后你就不用管了,它会决定怎么压缩,编译。
那如今想使用一些有爱的css预编译程序,来点sass吧。 你可能已经想到了,再来个loader就行啦,确实是这样简单。
npm install sass-loader --save-dev
稍微修改一下webpack.config.js,删掉咱们先前添加的css规则,加上下面的loader
{ test: /\.scss$/, loaders: ['style', 'css', 'sass'], include: APP_PATH },
添加两个sass文件,variables.scss和main.scss
variables.scss
$red: red;
main.scss
@import "./variables.scss"; h1 { color: $red; }
在index.js中引用
require('./main.scss');
而后发现标题如愿变红,至关简单吧。
处理图片和其余静态文件
这个和其余同样,也许你也已经会玩了。安装loader,处理文件。诸如图片,字体等等,不过有个神奇的地方它能够根据你的需求将一些图片自动转成base64编码的,为你减轻不少的网络请求。
安装url-loader
npm install url-loader --save-dev
配置config文件
{ test: /\.(png|jpg)$/, loader: 'url?limit=40000' }
注意后面那个limit的参数,当你图片大小小于这个限制的时候,会自动启用base64编码图片。
下面举个栗子。
新建一个imgs文件夹,往里面添加一张崔叔的照片。在scss文件中添加以下的东西。
@import "./variables.scss"; h1 { color: $red; background: url('./imgs/avatar.jpg'); }
npm start, 而后查看图片的url,用浏览器审查元素看到生成了best64位码的图片编码,建议一些图标什么的用此功能。
添加第三方库
有的时候还想来点jquery,moment,undersocre之类的库,webpack能够很是容易的作到这一点,有谣言说Bower即将中止开发了, 做者推荐都使用npm来管理依赖。那么咱们如今安装在咱们的app中添加jquery和moment的支持。
npm install jquery --save-dev
在js中引用
var pro = require('./pro'); var $ = require('jquery'); var app = document.createElement('div'); app.innerHTML = '<h1>Hello World it</h1>'; document.body.appendChild(app); app.appendChild(pro()); $('body').append('<p>look at me! now is ' + new Date() + '</p>');
看看浏览器,成功! jquery如今都起做用了!
开发技巧
启用source-map
如今的代码是合并之后的代码,不利于排错和定位,只须要在webpack.config.js中添加
... devtool: 'eval-source-map', ...
这样出错之后就会采用source-map的形式直接显示你出错代码的位置。
配置webpack-dev-server代理
一个典型的例子就是先后端分离。后端是的server无论用什么写的。假定在本机他是相似http://localhost:5000/api/*这类的请求,如今添加配置让ajax请求能够直接proxy过去。
devServer: { hot: true, inline: true, //其实很简单的,只要配置这个参数就能够了 proxy: { '/api/*': { target: 'http://localhost:5000', secure: false } } }
重启之后 发现/api/*的请求都代理到http://localhost:5000去了~
安装jshint检测js语法
npm install jshint-loader --save-dev
在config文件中配置
module: { ... //和loaders同样的语法,很简单 perLoaders: [ { test: /\.jsx?$/, include: APP_PATH, loader: 'jshint-loader' } ] } ... //配置jshint的选项,支持es6的校验 jshint: { "esnext": true },
好了 如今每次npm run start的时候就能够看到jshint的提示信息咯
有时某些插件都须要全文件使用例如:jquery
webpack提供一个插件 把一个全局变量插入到全部的代码中,在webpack.config.js里面配置
... plugins: [ new HtmlwebpackPlugin({ title: 'Hello World app' }), //provide $, jQuery and window.jQuery to every script new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" }) ] ...
分离app.js和第三方库
如今咱们build出来的只有一个bundle.js 若是第三方库不少的话,会形成这个文件很是大,减慢加载速度,如今咱们要把第三方库和咱们app自己的代码分红两个文件。
修改entry入口文件
entry: { app: path.resolve(APP_PATH, 'index.js'), //添加要打包在vendors里面的库 vendors: ['jquery', 'moment'] },
添加CommonsChunkPlugin
plugins: [ //这个使用uglifyJs压缩你的js代码 new webpack.optimize.UglifyJsPlugin({minimize: true}), //把入口文件里面的数组打包成verdors.js new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'), new HtmlwebpackPlugin({ title: 'Hello World app' }) ]
添加完毕 运行npm run build
在build文件夹中发现以下结构
budle.jsindex.htmlvendors.js