详解如何用webpack打包一个网站应用项目

详解如何用webpack打包一个网站应用项目

本文介绍了如何用webpack打包一个网站应用，现在分享给大家，有需要的可以了解一下

随着前端技术的发展，越来越多新名词出现在我们眼前。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' }kvkGi,

{ 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，在项目目录kvkGi下新建一个名为.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 hellohttp:// = `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已经生成啦！

tips:

如果我们不想每次修改都手工编译http://，直接执行webpack --watch就会自动监听文件修改，自动编译。

如果我们想压缩混淆代码，执行webpack -p吧！

如果配置文件不叫webpack.config.js，也可以运行webpack --config *.js指定配置文件。

webpack功能强大，这里只是指引小白开始使用，想深入了解的童鞋快去看官方文档吧！http://webpack.github.io/

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。