zoukankan      html  css  js  c++  java
  • webpack入门之打包html,css,js,img(二)

    今天来说说如何打包css!!!!

    上一节我还漏了些好东西没贴出来,上一节我们是成功打包出html,js,最后也说了,每次发布版本,跟新代码进服务器的时候我们是跟新dist文件夹里面的东西

    我们每次打包生成的js都是index.js,这就会出现一个问题,我们把代码跟新上服务器了,但是用户打开后发现新增的功能并没有体现出来,这其实是浏览器缓存在作怪,

    因为我们每次生成的都是index.js,脚本名字没有改变,所以浏览器就记住上一次缓存了,解决这种缓存的方式有两种

    第一种:

    我们告诉用户,手动去清除浏览器缓存,然后再刷新页面,那么新加的功能就出来了(这似乎不是个好办法)

    第二种:

    第二种方法是最直接有效的,我们每次打包代码的时候生成不一样名字就可以了,

    就像这样子

    这样浏览器就不会记住缓存了,

    每次打包都会引入最新的index.***.js,后面的css也会是如此哈,带后缀的(我们要专业点这叫hash值,哈希值)

    不废话了,直接贴配置

    数字5代表后面hash值长度,

    好了要进入今天的主题了(打包css!!!)

    如何打包css?我们同样是不需要link到页面上去的

    直接在index.js上

    想这么做的前提是先 安装插件

    cmd 进入demo

    npm install --save-dev style-loader css-loader  

    css-loader和style-loader

    搞定后配置webpack

    通过这种方式打包css,打包过后,你会发现没有打包出css文件,而是把css打包进app/index.html下了(这并不是我们要的)

    这样是不行的,我们得把css抽出来,打包到单独的css里去

    怎么办?装插件呀,还要问

    npm install extract-text-webpack-plugin --save-dev

    var path = require('path');
    var  webpack = require('webpack');
    var  HtmlWebpackPlugin = require('html-webpack-plugin');//打包html的插件
    
    
    var  ExtractTextPlugin = require("extract-text-webpack-plugin");   //打包css的插件
    
    
    
    module.exports={
        entry:{
    
           'app/dist/js/index':'./app/src/js/index.js'
    
        },
    
        module: {
            //规则,刚才安装的css-loader和style-loader这里进行配置
            rules: [
                {
                  test: /.css$/,
                  use: ExtractTextPlugin.extract({
                    fallback: "style-loader", 
                    use: "css-loader" 
                  })
                }
            ]
        },
    
        output: {
            filename: '[name].[chunkHash:5].js',
    
        },
        plugins:[
    
    
            new HtmlWebpackPlugin({
                filename: './app/index.html',
                chunks: ['app/dist/js/index'],
                template: './app/src/page/index.html',
            }),
    
            new ExtractTextPlugin({
                //这里关键至极,filename:[name].[contenthash:5].css;之前我们项目是这样写的,这样写,打包出来的css就跑到dist/js里面去了,
                // 虽然不影响使用,但是混到一起就是很不舒服,
                //这里你们非常有必要先试试,filename:[name].[contenthash:5].css
                //还有就是最外层建一个 css文件夹  ,然后这样配置filename:css/[name].[contenthash:5].css,然后看看具体打包出什么,
                filename: (getPath)=>{
                    return getPath('[name].[contenthash:5].css').replace("js","css")
                }
            }),
    
    
        ]
    
    }

    结尾

    照着如上配置,那么就达到我们的效果了,dist文件下生成了,css文件夹和js文件夹,对了,下面生成很多js,不关事的,下节会讲如何在打包之前删掉它们(install 一个插件而已),那么就可以保证每次打包都生成对应的一个js和css了,

    这节感觉自己写的很不详细,因为我还在上班啊  (偷偷写的)

    学会的童鞋能否给个赞呢?

  • 相关阅读:
    教你用笔记本充当无线路由,wifi上网了!!!
    SQL重复记录查询
    ==、object.Equals()、object.ReferenceEquals()
    SeriesChartType
    容易被忽视的装箱问题
    [转]Anonymous type and implicit type
    as、is、GetType()
    [转]dataGridView控件DateTime列插入DateTimePicker
    .NET(C#):理解值类型/引用类型,装箱/拆箱,Object类
    通过其轴标签沿 X 轴对齐不同系列中的数据点
  • 原文地址:https://www.cnblogs.com/luojianjian/p/8074903.html
Copyright © 2011-2022 走看看