Webpack之“多页面开发”最佳实战

前言：相信之前看过这篇文章，前端构建工具之“Webpack”的朋友，对于Webpack有了一定的了解。那么今天就跟大家分享下：如何利用webpack，来进行多页面项目实战开发。

一、项目初始化安装

1、先安装node.js 和 webpack

第一步:如果没有安装node的朋友,可以去node中文官网下载。安装好后，打开cmd工具，输入:


1

 node - v // 如果有显示内容则证明安装成功(这是看我们node版本的指令) 如下图：

第二步: 全局安装webpack


1

 npm  install  webpack  -g

2、配置package.json  如果没有,可以初始化安装


1

 npm init

npm是node.js的一个包管理工具。(项目中所需要用到的包,都会放在node_modules文件夹下)

3、初始化package.json,添加项目所需要的模块


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

"devDependencies": {

    "babel": "^6.3.13",

    "babel-core": "^6.3.21",

    "babel-loader": "^6.2.0",

    "babel-plugin-transform-runtime": "^6.3.13",

    "babel-preset-es2015": "^6.3.13",

    "babel-runtime": "^5.8.34",

    "clean-webpack-plugin": "^0.1.10",

    "copy-webpack-plugin": "^3.0.1",

    "css-loader": "^0.23.1",

    "extract-text-webpack-plugin": "^1.0.1",

    "file-loader": "^0.8.5",

    "glob": "^7.0.5",

    "html-loader": "^0.4.3",

    "html-webpack-plugin": "^2.9.0",

    "imports-loader": "^0.6.5",

    "jquery": "^1.12.4",

    "less": "^2.7.1",

    "less-loader": "^2.2.3",

    "style-loader": "^0.13.0",

    "url-loader": "^0.5.7",

    "webpack": "^1.12.13",

    "webpack-dev-server": "^1.14.1"

  }

4、安装模块


1

npm install //打开cmd命名行，进入到文件夹，进行下载项目开发所需要的模块

二、搭建项目结构

 


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

- demo

    - src                #代码开发目录

        - less            #css目录,按照页面(模块)、通用、第三方三个级别进行组织

            + common

            + index.less

            + aboout.less

                     + list.less

            ...

        + images         #图片资源

        - js             #JS脚本,按照page、components进行组织

            + index.js

            + about.js

            + list.js

            ...

        index.html       #HTML模板

        about.html

        list.html

    - dist               #webpack编译打包输出目录,无需建立目录可由webpack根据配置自动生成

        + css                

        + js

        +images

        index.html

        about.html

        list.html

    + node_modules       #所使用的nodejs模块

    package.json         #项目配置

    webpack.config.js    #webpack配置

 

三、webpack相关配置

 


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

var path = require(‘path‘);

var glob = require(‘glob‘);

var webpack = require(‘webpack‘);

var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘);//将你的行内样式提取到单独的css文件里,

var HtmlWebpackPlugin = require(‘html-webpack-plugin‘); //html模板生成器

var CleanPlugin = require(‘clean-webpack-plugin‘); // 文件夹清除工具

var CopyWebpackPlugin = require(‘copy-webpack-plugin‘); // 文件拷贝

var config = {

entry: { //配置入口文件,有几个写几个

index: ‘./src/js/index.js‘,

list: ‘./src/js/list.js‘,

about: ‘./src/js/about.js‘

},

output: {

path: path.join(__dirname, ‘dist‘), //打包后生成的目录

publicPath: ‘‘,//模板、样式、脚本、图片等资源对应的server上的路径

filename: ‘js/[name].[hash:6].js‘,//根据对应入口名称,生成对应js名称

chunkFilename: ‘js/[id].chunk.js‘   //chunk生成的配置

},

resolve: {

root: [],

         //设置require或import的时候可以不需要带后缀

        extensions: [‘‘, ‘.js‘, ‘.less‘, ‘.css‘]

    },

module: {

loaders: [ 

{

test: /\.css$/,

loader: ExtractTextPlugin.extract(‘style‘, ‘css‘)

},

{

test: /\.less$/,

loader: ExtractTextPlugin.extract(‘css!less‘)

},

{

test: /\.js$/,

       loader: ‘babel‘,

       exclude: /node_modules/,

       query:{

       presets: [‘es2015‘]

       }

   },

{

test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,

loader: ‘file-loader?name=./fonts/[name].[ext]‘

},

{

                test: /\.(png|jpg|gif|svg)$/,

                loader: ‘url‘,

                query: {

                    limit: 30720, //30kb 图片转base64。设置图片大小,小于此数则转换。

                    name: ‘../images/[name].[ext]?‘ //输出目录以及名称

                }

            }

]

},

plugins: [

new webpack.ProvidePlugin({ //全局配置加载

           $: "jquery",

           jQuery: "jquery",

           "window.jQuery": "jquery"

        }),

        new CleanPlugin([‘dist‘]),// 清空dist文件夹

new webpack.optimize.CommonsChunkPlugin({

name: ‘common‘, // 将公共模块提取,生成名为`vendors`的chunk

minChunks: 3 // 提取至少3个模块共有的部分

}),

new ExtractTextPlugin( "css/[name].[hash:6].css"), //提取CSS行内样式,转化为link引入

new webpack.optimize.UglifyJsPlugin({ // js压缩

     compress: {

       warnings: false

     }

   }),

   new CopyWebpackPlugin([

            {from: ‘./src/images‘, to: ‘./images‘} //拷贝图片

        ])

],

externals: {

        $: ‘jQuery‘

    },

    //devtool: ‘#source-map‘,

//使用webpack-dev-server服务器,提高开发效率

devServer: {

// contentBase: ‘./‘,

host: ‘localhost‘,

port: 8188, //端口

inline: true,

hot: false,

}

};

module.exports = config;

var pages = Object.keys(getEntry(‘./src/*.html‘));

var confTitle = [ 

{name: ‘index‘, title: ‘这是首页标题‘},

{name: ‘list‘, title: ‘这是列表标题‘},

{name: ‘about‘, title: ‘这是关于我标题‘}

]

//生成HTML模板

pages.forEach(function(pathname) {

var itemName  = pathname.split(‘src\\‘) //根据系统路径来取文件名,window下的做法//,其它系统另测

    var conf = {

        filename: itemName[1] + ‘.html‘, //生成的html存放路径,相对于path

        template: pathname + ‘.html‘, //html模板路径

        inject: true, //允许插件修改哪些内容,包括head与body

        hash: false, //是否添加hash值

        minify: { //压缩HTML文件

            removeComments: true,//移除HTML中的注释

            collapseWhitespace: false //删除空白符与换行符

        }

    };

conf.chunks = [‘common‘, itemName[1]]

for (var i in confTitle) { 

if (confTitle[i].name === itemName[1]) { 

conf.title = confTitle[i].title

}

}

    config.plugins.push(new HtmlWebpackPlugin(conf));

});

//按文件名来获取入口文件(即需要生成的模板文件数量)

function getEntry(globPath) {

    var files = glob.sync(globPath);

    var entries = {},

        entry, dirname, basename, pathname, extname;

    for (var i = 0; i < files.length; i++) {

        entry = files[i];

        dirname = path.dirname(entry);

        extname = path.extname(entry);

        basename = path.basename(entry, extname);

        pathname = path.join(dirname, basename);

        entries[pathname] = ‘./‘ + entry;

    }

    return entries;

}

四、页面开发

 

在我们的开发目录,新建所需要的页面, 以index.html 为例子:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

HTML:

    <!DOCTYPE HTML>

    <html>

        <head>

            <meta charset="UTF-8">

            <title><%= htmlWebpackPlugin.options.title %></title>

            <meta name="keywords" content="" />

            <meta name="description" content="" />

            <meta name="baidu-site-verification" content="wczeFssEiy" />

            <meta http-equiv="Cache-Control" content="no-transform " /> 

            <meta http-equiv="Cache-Control" content="no-siteapp" />

        </head>

        <body>

            <div id="test">

                这是首页

                <p>

                这是一个段落说明!

                </p>

            </div>

        </body>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

CSS:

    @charset "utf-8";

    /*

    * @description: 首页

    * @author: duanliang

    * @updateTime: 2016-9-3

    */

    /*变量定义*/

    @width: 500px;

    @color: #333;

    @fontSize: 16px;

    #test { 

        width: @width;

        height:100px;

        border:1px solid #ccc;

        color: @color;

        font-size: @fontSize;

        margin:30px auto;

        p.info { 

            background-color:#f34;

            color: @color;

        }

    }

1

2

3

4

5

6

Javascript:

//引入css

require("../less/global");

require("../less/index");

$(‘body‘).append(‘这是js动态生成的内容:这是index页面!‘)

直接运行命令: npm run dev 指令，不出意外。直接访问http://localhost:8188/ 即可看到如下效果:

因为之前,就把运行命令写在package.json中


1

2

3

4

"scripts": {

    "dev": "webpack-dev-server --progress --colors --inline", //开发模式

    "build": "webpack -p" // 编译打包

 }

可能有些朋友会好奇，为什么在我们HTML模板中，没有写入任何CSS、JS链接。为什么可以在运行时候看到效果呢？

那是因为webpack帮我做了这一切，它会自动帮我们注入到模板里面。

接下来,我们运行下 npm run build 指令,看生成的页面时候一个什么样子?

Github下载: 点击下载


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

使用方式：

    1、下载后，解压安装包。

    

    2、打开cmd命名行，进入到解压目录。

    

    3、输入指令 npm install 安装项目所依赖的包

    

    4、安装成功，运行指令 npm run dev

    

    5、运行成功。浏览器输入：http://localhost:8188/ 即可看到效果

    

    备注：页面切换的话，直接域名+页面名称即可。

    

    比如：  http://localhost:8188/index.html  //首页

    

         http://localhost:8188/about.html //关于我页面

          

         http://localhost:8188/list.html  //列表页面

写在最后：可能有了解前端构建工具的朋友，会提出这样的问题：“webpack与gulp的区别是什么?”其实这两者根本就不是一个类型的东西，所以就没有可比性。前者专注于资源模块化加载打包，推崇“一切皆模块”的理论。后者，则专注于构建。具体区别，可以自行百度(谷歌)。不过吐槽一下：webpack处理图片确实有点弱，不过这也跟它本身有点关系。如果需要对图片进行优化处理的朋友，可以采用gulp+webpack的方式来构建你的项目。

写文章不易，看似简单，仍需花非时间和精力。我想这可能也是很多人没有坚持写博客原因吧！

温习提示：由于最近前端MVVM框架火热，后续计划分享一些关于vue.js相关的知识。喜欢的朋友，可以关注下博客，更新时间待定！

如果写的文章，对你帮助，记得打赏哦！哈哈...

本文出处:http://www.duanliang920.com/learn/web353.html

时间： 2024-10-15 14:24:32

Webpack之“多页面开发”最佳实战的相关文章

webpack+react多页面开发(二)-终极架构

webpack4+react16多页面架构 webpack在单页面打包上应用广泛,以create-react-app为首的脚手架众多,单页面打包通常指的是将业务js,css打包到同一个html文件中,整个项目只有一个html文件入口,但也有许多业务需要多个页面不同的入口,比如不同的h5活动,或者需要支持seo的官方网站,都需要多个不同的html.webpack-react-multi-page架构让你可以在多页面在项目开发中自动化打包新创建页面并保证每个页面都可以热更新 ,build打包后有清晰

网站开发（周五）：项目前端页面开发（实战）

第一.前端基础简介 前端网页:根据此前项目需求分析可知,我们需要开发网站首页.文章分类页.搜索页.正文页.标签页,而一个最基本网页模版有三部分,网页顶部导航条.网页中部主体.网页底部,其中顶部和底部布局固定,中部展示内容每张网页不同. 网页代码:我们知道,网页模板的基本代码的顶部和底部相同,主要中部主体在变化. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q

webpack 多页应用架构系列实战

阅读目录 1.webpack配置了解 2.webpack CommonsChunkPlugin公共代码剥离 3.了解ProvidePlugin的用途 回到顶部 1.webpack配置了解 webpack的配置文件是一个nodejs的module,使用CommonJS风格来编写的,比如如下: module.exports = { entry: './index', output: { path: __dirname + '/dist', filename: 'bundle.js' } } webp

vue2 入门 教程 单页应用最佳实战[*****]

推荐 vue2 入门 教程 -------- 看过其他的,再看作者的,很赞 vue2 入门 教程 单页应用最佳实战 :  具体在 https://github.com/MeCKodo/vue-tutorial ----------------------------- 通过本文,我们可以学习到许多关于vue的特性. 1.了解了vue-cli脚手架 2.初步对webpack有了一些了解和认识 3.如何用.vue愉快的开发 4.使用vuex进行组件通信 5.路由(子路由)的应用 6.使用 vue-d

Android开发最佳实践---Futurice之见

原文链接:https://github.com/futurice/android-best-practices 本文是Futurice公司的Android开发人员总结的最佳实践,遵循这些准则可以避免重复制造轮子.如果你对iOS或者WindowsPhone开发感兴趣,那么也请看看iOS最佳实践和Windows客户端开发最佳实践. 第一版翻译自:http://blog.csdn.net/asce1885 Android开发技术日新月异, Github上也有较大更新, 故对原文有增删 CSDN的mar

[转]Android开发最佳实践

——欢迎转载,请注明出处 http://blog.csdn.net/asce1885 ,未经本人同意请勿用于商业用途,谢谢—— 原文链接:https://github.com/futurice/android-best-practices 本文是Futurice公司的Android开发人员总结的最佳实践,遵循这些准则可以避免重复制造轮子.如果你对iOS或者Windows Phone开发感兴趣,那么也请看看iOS最佳实践和Windows客户端开发最佳实践. 概要 使用Gradle和推荐的工程结构

移动端页面开发

移动端页面开发 移动客户端的开发类型(站在前端立场上来说),主要是三种:Native App(原生APP),也就是完全使用移动设备系统语言写的客户端,iPhone iPad就是纯Object-C,安卓就是纯JAVA, 是性能最棒的开发方式,但灵活性不好.Web App, 就是在移动浏览器里打开的,纯HTML+CSS+JS,说白了就是个网页,只不过非常的富应用,比如手机浏览器访问的GMAIL.就是在浏览器里打开的页面.IOS支持可以在桌面创建访问的快捷方式,但是说到底还是打开Safari跑.而且对

移动端WEB前端开发最佳实践

移动端WEB前端开发最佳实践 Safari,Android Browser,Chrome都是以WebKit为核心的 移动设备和PC之间的页面现实存在差异(Safari中定义了viewport) 在移动设备和桌面端WEB前端开发中,事件绑定存在差异(移动触点) 页面控件设计存差异(点触不灵敏,虚拟键盘弹出框) 移动设备的网络带宽普遍比PC慢,移动页面要设置更简洁 PC页面兼容移动设备 使用流式布局 借助CSS Media queries(媒体查询)技术 使用合适的图片显示兼容方案 保持页面简洁,不

Android企业级应用程序开发完整训练：精通Android商业级开发最佳实践的24堂课

从企业级商业实战的角度入手,24小时内通过23个动手实战案例,循序渐进的对Android商业级别的应用程序开发要点各个击破,依托于在多年的Android(6款完整的硬件产品和超过20款应用软件)开发和企业级培训经验(超过150期的次Android的企业内训和公开课),旨在在实务的基础之上帮助你完成任何复杂程序的高质量Android应用程序开发,让Android开发跟上想象的速度.最后,通过ActivityManagerService揭秘Android应用程序一切行为背后的核心根源,让你从此开发应