您的位置：首页 > Web前端 > JavaScript

Webpack常用配置学习总结

2018-01-29 16:19 741 查看

Webpack作为前端模块开发打包工具，其地位愈加重要

- 通过下面几个问题进行总结

我自己用的是webpack低版本的，有一些新的特性，没法提及

对脚本的处理

JS用什么loader加载？

CSS用什么loader加载？

采用的是webpack打包工具本身的loader，比如script-loader,babel-loader等，能够应付项目的脚本
module: {
loaders: [
//处理css样式的loader
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader","css-loader") },
// 处理图片。字体图标的loader,这个规则，我也是查找了很久，目前来说比较好用的，其他的有些会报错，因为我用的字体图标是font-awesome会版本的问题
{ test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=100&name=resource/[name].[ext]' },
//这个是对html模板处理的loader
{ test: /\.string$/, loader: 'html-loader'}
]
},

-Output里要分文件夹存放目标文件，怎么设置？（默认打包在dist文件夹下，需求是标准化的项目目录—image-js-css）

- 官方文档上的例子中的entry只有一个js,我们有多个怎么处理?

entry: {
'common': ['./src/page/common/index.js'],
'index': ['./src/page/index/index.js'],
'user-login': ['./src/page/user-login/login.js'],
'user-register': ['./src/page/user-register/register.js'],
'user-pass-reset': ['./src/page/user-pass-reset/reset.js'],
'result': ['./src/page/result/result.js']
}.
output: {
path: './dist',
publicPath: '/dist',
filename: 'js/[name].js'
},
这是我的小栗子，给entry参数，设置多个js对象，output打包到dist目录下，生成多个js文件

Jquery引入方法？

<div class="footer">
<div class="w">
<div class="links">
<a href="http://www.qq.com" class="link" target="_blank">腾讯网</a>|
<a href="http://www.baidu.com" class="link" target="_blank">百度</a>|
<a href="http://www.taobao.com" class="link" target="_blank">淘宝网</a>|
<a href="http://www.zhihu.com" class="link" target="_blank">知乎</a>
<p class="copyright">
Copyright © 2018 spring-learner.com All Right Reserved
</p>
</div>
</div>
</div>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
/*我是用footer这个公共模块抽调出来的，每个页面会使用到这个模块，同时加载Jquery
另外还有一个问题就是，jquery全局变量的使用，需要在externals参数中定义
*/
externals: {
'jquery': 'window.jQuery'
},

开发过程中，会有很多公共的代码模块，我们怎么提取

/*
我在前面的jquery引用中稍微提及了一下，对于html模板的提取，一个页面有header,content,footer等等，有些代码重用性比较高，这个时候我们这个提取出来，这里我先举个栗子
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<%=require('html-loader!./layout/head-common.html')%>
<title>mall</title>
</head>
<body>
<%=require('html-loader!./layout/nav.html')%>
<%=require('html-loader!./layout/header.html')%>
<div class="page-wrap w">
<%=require('html-loader!./layout/nav-slide.html')%>
<div class="content with-nav">test</div>
</div>
<%=require('html-loader!./layout/footer.html')%>
</body>
</html>
//这个模板有很多抽离的公共的模块，支持ejs模板的语法，注意的是前面应该加入html-loader!的规则

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 前端脚本编辑器 css

相关文章推荐

新的分享

章节导航