如何用webpack打包一个网站应用 如何用webpack打包一个网站应用
\u5982\u4f55\u7528webpack\u6253\u5305\u4e00\u4e2a\u7f51\u7ad9\u5e94\u7528\u6253\u5305\u591a\u4e2a\u9875\u9762\u7684js\u6587\u4ef6 \u8bfb\u53d6src/views\u4e0b\u7684\u76ee\u5f55\uff0c\u7ea6\u5b9a\u6bcf\u4e00\u4e2a\u76ee\u5f55\u5f53\u6210\u4e00\u4e2a\u9875\u9762\uff0c\u6253\u5305\u6210\u4e00\u4e2ajs chunk\u3002
2. \u6253\u5305\u591a\u4e2ahtml \u5faa\u73af\u751f\u6210\u591a\u4e2aHtmlWebpackPlugin\u63d2\u4ef6\uff0c\u628a\u6bcf\u4e00\u4e2a\u63d2\u4ef6\u7684chunks\u5404\u81ea\u6307\u5411\u4e0a\u9762\u6253\u5305\u7684js chunk\u3002
1. \u6253\u5305\u591a\u4e2a\u9875\u9762\u7684js\u6587\u4ef6 \u8bfb\u53d6src/views\u4e0b\u7684\u76ee\u5f55\uff0c\u7ea6\u5b9a\u6bcf\u4e00\u4e2a\u76ee\u5f55\u5f53\u6210\u4e00\u4e2a\u9875\u9762\uff0c\u6253\u5305\u6210\u4e00\u4e2ajs chunk\u3002 2. \u6253\u5305\u591a\u4e2ahtml \u5faa\u73af\u751f\u6210\u591a\u4e2aHtmlWebpackPlugin\u63d2\u4ef6\uff0c\u628a\u6bcf\u4e00\u4e2a\u63d2\u4ef6\u7684chunks\u5404\u81ea\u6307\u5411\u4e0a\u9762\u6253\u5305\u7684js chunk\u3002
随着前端技术的发展，越来越多新名词出现在我们眼前。angularjs、react、gulp、webpack、es6、babel……新技术出现，让我们了解了解用起来吧！今天我来介绍一下如何用webpack打包一个网页应用。一般我们写页面，大概都是这样的结构：
index.html
css
style.css
js
index.js
...........
这样我们的html里直接引用css和js，完成一个网页应用。用webpack也类似，只是webpack把图片、css和js都编译打包成一个文件，我们只需要引用一个文件就可以了。
1.我们需要先安装node环境。没安装的请自行安装
2.在项目目录下输入npm init初始化一个node项目，输入项目名称等信息，完成后生成一个package.json文件。
3.在项目目录下安装webpack
npm install --save-dev webpack
4.我们需要一个webpack.config.js文件，记录webpack配置信息。它的配置大概这样：
var webpack = require('webpack');
var path = require('path');
var buildPath = path.resolve(__dirname, 'build');
var config = {
//入口文件
entry: {
index : './src/js/index.js'
},
extensions: ['', '.js', '.json', '.css', '.less'],
output: {
path: buildPath, //编译后的文件路径
filename: 'app.js'
},
module: {
//Loaders
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
//.js 文件使用 babel 来编译处理
{ test: /\.js$/, loader: 'babel' },
//图片文件使用 url-loader 来处理，小于8kb的直接转为base64
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
},
};
module.exports = config;
我们需要指定编译的入口文件和输出的目录路径，以及css和js用什么loader处理，比如我使用了less，要编译less文件，就指定less-loader，js我要用es6来写，为了兼容性，用babel来转成es5的代码。如果要使用react，也可以指定jsx等的编译方式。
5.这些loader都是需要npm安装的
npm install --save-dev css-loader less less-loader style-loader url-loader babel babel-core babel-loader babel-preset-es2015
6.如果需要用babel，在项目目录下新建一个名为.babelrc的隐藏文件，里面这样写：
{"presets":["es2015"]}
保存。
7.根据配置可以看到我们需要一个src文件夹和一个build文件夹，src放图片、css和js的源代码，build作为输出文件夹放编译后的文件。
8.src/js/index.js文件作为我们的入口文件，我们在里面可以愉快地写es6的代码，比如：
'use strict';
require('../css/base.css');
require('../css/animate.css');
require('../css/style.less');
require('../js/zepto.min.js');
let a = 'world';
let hello = `hello ${a}`;
console.log(hello);
可以看到css我们都通过require的方式引进来，这样webpack会把css和js打包进一个文件。
9.我们还差个index.html，放在项目文件夹下就可以，正常写，引入build/app.js就可以啦！
10.让我们试试吧，在命令行项目目录下运行webpack，哇，成功！
Time: **2622**ms
**Asset** **Size** **Chunks** **Chunk Names**
**app.js** 120 kB **0** **[emitted]** index
+ 10 hidden modules
可以看到app.js已经生成啦！
绛旓細webpack.config.js 浣跨敤鐩稿叧鎻掍欢 path html-webpack-plugin html鏂囦欢澶勭悊鎻掍欢 clean-webpack-plugin 娓呴櫎涓婃鎵撳寘鏂囦欢鎻掍欢 copy-webpcak-plugin 鎵撳寘鏃堕渶瑕佸鍒剁殑鐩稿叧鏂囦欢鐨勬彃浠(姣斿涓浜涙姤琛ㄦ枃浠舵ā鐗) speed-measure-webpack-plugin 閫熷害娴嬮噺鎻掍欢 (const SpeedMeasurePlugin = require("speed-measure-webpack-plugin")...
绛旓細铏界劧宸茬粡2019骞翠簡涓嶈繃鏈変竴浜涢」鐩繕鏄渶瑕佺敤鍒癹query鐨勪笉杩囪冭檻鍒颁娇鐢╦query鐨勪竴鍫嗗吋瀹规ч棶棰樹篃涓轰簡鍙互椤哄埄鍦颁娇鐢‥S6鏉ユ捀浠ｇ爜鐮旂┒浣跨敤webpack+babel鎵撳寘浠ｇ爜鏉ュ彂甯冨嚑涓噸鐐癸細1.涓轰簡灏嗘ā鍧楀垎鍓插姞杞斤紝涓嶈嚦浜涓涓js鏂囦欢杩囧ぇ锛屼竴涓〉闈腑浣跨敤澶氫釜js鏂囦欢2.鐢变簬鏄椤甸」鐩紙澶氫釜html锛夛紝姣忎釜椤甸潰浣跨敤鐨刯s鏂囦欢閮戒笉...
绛旓細V2 -> V3 鏇存柊鍗囩骇鍗冲彲 浜屻webpack鏍稿績姒傚康 2.1 Entry 2.2 Output 2.3 Loaders 2.3.1 甯哥敤Loader 缂栬瘧鐩稿叧 鏍峰紡鐩稿叧 鏂囦欢鐩稿叧 2.4 Plugins 2.4.1 甯哥敤plugins 浼樺寲鐩稿叧 鍔熻兘鐩稿叧 2.5 鍚嶈瘝 涓夈佸垵鎺 webpack 3.1 浣跨敤babel鎵撳寘es6 3.1.1 缂栬瘧 ES 6/7 Babel Babel Presets Babel ...
绛旓細浠嬬粛寮鍙憊ue.js鍗曢〉闈㈠墠绔簲鐢ㄦ椂锛濡備綍浣跨敤webpack鏉鎵撳寘銆傛湰鏂囧悓鏃朵篃鏄箣鍓峳eact绯诲垪鏂囩珷鐨勫欢缁備綔涓涓涓瀹屾暣鐨凞emo锛岀郴鍒楁枃绔犱腑鐨勫畬鏁撮」鐩紝浼氬疄鐜颁竴涓枃浠朵笂浼犲拰绠＄悊鐨勫崟椤甸潰Web搴旂敤1 瀹夎渚濊禆鍖呴」鐩腑浣跨敤浜唙ue.js锛寃ebpack锛実ulp锛岃繕鏈夐タ浜嗕箞寮婧愮殑elementUI锛屽洜涓轰娇鐢ㄤ簡es2015锛屾墍浠ヨ繕闇瑕佸紩鍏abel灏...
绛旓細妯″潡璇存槑锛4.淇敼 package.json 鏂囦欢鐨 scripts 灞炴у,杩涜鎵撳寘璧勬簮鐨勯厤缃 5.瀹夎鐩稿叧鐨 loader 6.瀹夎jquery 7.鍦ㄥ叆鍙ｆ枃浠 app.js 涓紩鍏 jquery 8.缁欐寜閽粦瀹氫簨浠 9.杩愯鍛戒护 10.缁撴灉灞曠ず 閫氳繃 webpack 鐨 ProvidePlugin 鎻掍欢鍏ㄥ眬寮曞叆绗笁鏂圭被搴,浠 echats 浣跨敤涓轰緥 1 ~ 5姝ュ悓涓 6.瀹夎e...
绛旓細鐢╦s閬嶅巻 鎻掑叆 link鏍囩鍜宻cript鏍囩銆俻s: 淇敼浜webpack閰嶇疆锛岄渶瑕侀噸鍚」鐩墠浼氱敓鏁 鎵撳寘椤圭洰 鍙互鐪嬪埌鎵撳寘浣撶Н澶уぇ鍑忓皬浜 椤甸潰涓婁篃姝ｇ‘寮曞叆浜哻dn璧勬簮銆傛渶鍚庡涓奼it鍦板潃锛 https://gitee.com/zhkumsg/webpack-cdn-demo 姣旀偛浼ゆ洿鎮蹭激鐨勫垎鍓茬嚎 鍘熸潵涓ゅ勾鍓嶅凡缁忔湁浜哄仛浜涓涓绫诲瀷鐨剋ebpack-cdn-plugin ...
绛旓細杩樺彲浠ラ氳繃閰嶇疆鏂囦欢鐨勬柟寮忓憡璇墂ebpack闇瑕佹墦鍖呭摢涓枃浠 杩欏彞鎸囦护鐨勫惈涔夋槸灏唚ebpack灏唅ndex.js鍜屼粬渚濊禆鐨勬ā鍧楁墦鍖呭埌涓涓鏂囦欢涓 鍏跺疄webpack鎵撳寘鎸囦护闄や簡鍙互閫氱煡瑕佹墦鍖呭摢浜涙枃浠讹紝杩樺彲浠ラ氳繃閰嶇疆 2.2webpack甯歌閰嶇疆 鍒氭墠鏄緭鍏px webpack index.js 閭ｄ箞鐜板湪灏卞彲浠ヨ緭鍏px webpack浜 濡傛灉鎯宠...
绛旓細浠ュ唴銆傚啀浼樺寲涓嬪幓鐨勮瘽锛屾垜浠鐭ラ亾webpack鎵撳寘鐨勮繃绋嬩腑鍋氫簡鍟ワ紝棣栧厛鏄В鏋愪緷璧栧暒锛岀劧鍚庡氨鏄悇绉嶅悇鏍风殑loader銆備粠瑙ｆ瀽渚濊禆鐨勮搴﹀叆鎵嬶紝鎴戜滑鍙互bower install涓浜涙墦鍖呭ソ鐨勬枃浠讹紝鐒跺悗閫氳繃璁剧疆鍒悕璁╀緷璧栨寚鍚戣繖涓枃浠讹紝杩欐牱灏卞噺鍘讳簡绗笁鏂瑰簱鐨勪緷璧栬В鏋愭椂闂淬傜劧鍚庡悇绉嶅悇鏍风殑loader涔熸槸寰堣楁椂鐨勶紝涓绉嶅姙娉曟槸鍦╨oader...
绛旓細鎴戜滑鐭ラ亾浣跨敤webpack鎵撳寘vue椤圭洰鍚庝細鐢熸垚涓涓dist鏂囦欢澶癸紝dist鏂囦欢澶逛笅鏈塰tml鏂囦欢鍜屽叾浠朿ss銆乯s浠ュ強鍥剧墖绛夛紝閭ｄ箞鎵撳寘鍚庣殑鏂囦欢璇ュ浣曟纭繍琛屽憿锛熷樿嫢鐩存帴鎵撳紑html鏂囦欢锛屼細鎶ュ涓嬮敊璇細閭ｄ箞璇ュ浣曡繍琛屽憿锛熷叾瀹炲彲浠ュ皢鐢熸垚鐨刣ist鏂囦欢閮ㄧ讲鍒癳xpress鏈嶅姟鍣ㄤ笂杩愯銆傦紙1锛夈佸畨瑁卐xpress-generator鐢熸垚鍣ㄣ俷pm install ...
绛旓細webpack鎶婂悇涓ā鍧楃殑css鎵撳寘鎴涓涓鏂规硶锛歸ebpack.config.js閰嶇疆濡備笅 var ExtractTextPlugin = require("extract-text-webpack-plugin");//extract-text-webpack-plugin瀹夎姝ゆ彃浠 module:{ loaders:[{test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")} ]},plugin...
