Webpack常用配置学习总结

最新推荐文章于 2024-02-19 17:30:28 发布

jack_dengj

最新推荐文章于 2024-02-19 17:30:28 发布

阅读量269

点赞数

分类专栏：前端框架文章标签： javascript 前端脚本编辑器 css

本文链接：https://blog.csdn.net/jack_dengj/article/details/79196730

版权

前端框架专栏收录该内容

0 篇文章 0 订阅

订阅专栏

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!的规则

jack_dengj

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Webpack常用配置学习总结

Webpack常用配置学习总结Webpack作为前端模块开发打包工具，其地位愈加重要 - 通过下面几个问题进行总结我自己用的是webpack低版本的，有一些新的特性，没法提及对脚本的处理JS用什么loader加载？ CSS用什么loader加载？采用的是webpack打包工具本身的loader，比如script-loader,babel-loader等，能够应付项目的脚本module:
复制链接

扫一扫