icon-cookie
The website uses cookies to optimize your user experience. Using this website grants us the permission to collect certain information essential to the provision of our services to you, but you may change the cookie settings within your browser any time you wish. Learn more
I agree
blank_error__heading
blank_error__body
Text direction?

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了,

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

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

Measure
Measure
Related Notes
Get a free MyMarkup account to save this article and view it later on any device.
Create account

End User License Agreement

Summary | 2 Annotations
style-loader css-loader  
2020/06/03 14:43
extract-text-webpack-plugin
2020/06/03 14:44