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

這節感覺自己寫的很不詳細，因為我還在上班啊  （偷偷寫的）

學會的童鞋能否給個贊呢？