如何用webpack打包一个网站应用

Posted 2023-04-21

随着前端技术的发展，越来越多新名词出现在我们眼前。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已经生成啦！ 参考技术A http://blog.csdn.net/lijiajun95/article/details/54845503

如何用react-router做网易云音乐的路由切换

参考技术A this.props.router.push( '/' ) 用内部的router的push操作也能切换路由 参考技术B 为什么用 webpack? 他像 Browserify, 但是将你的应用打包为多个文件. 如果你的单页面应用有多个页面, 那么用户只从下载对应页面的代码. 当他么访问到另一个页面, 他们不需要重新下载通用的代码. 他在很多地方能替代 Grunt 跟 Gulp本回答被提问者采纳