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

這節感受本身寫的很不詳細，由於我還在上班啊  （偷偷寫的）

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