傻瓜式学习webpack(五)——css的抽离和html的自动引入js/css

一、以前面四篇文章为基础,我们接下来利用webpack进行css的抽离。这里需要安装一个插件。在安装之前,首先要说明一下,如果没有第四篇文章为前提,也就是图片没有进行处理的话,在抽离css的时候,它将无法解析css中的url,所以在抽离之前,一定要进行图片处理。

接下来开始干活。首先安装extract-text-plugin 插件。然后我们修改webpack.config.js文件,修改后如下:

var precss = require('precss');
var cssnext = require('cssnext');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var Ex = require('extract-text-webpack-plugin');
var webpack = require('webpack');
module.exports = {  
    //entry 入口文件 让webpack用哪个文件作为项目的入口  
    entry: {  
        index: './view/index.js',  
    },  
    //output 出口 让webpack把处理完成的文件放在哪里  
    output: {  
      path: __dirname+'/dist',  
      filename: '[name].js'  
    },  
    plugins:[
        // new HtmlwebpackPlugin({
        //     title: 'Hello World app'
        // }),
        new Ex('./style/[name].css')//生成一个css文件
    ],
    //时刻监听文件的更新  
    watch: true,  
    watchOptions: {  
        ignored: /node_modules/  
    },  
    //module 模块 要用什么不同的模块来处理各种类型的文件  
    module: {  
        loaders: [  
            {  
                test: /\.jsx?$/,  
                loader: 'babel-loader',//采用babel模块  
                exclude: /node_modules/,//忽略mode_modules的代码  
                query: {  
                    presets: ['es2015','react']//解析es6和react语言  
                }  
            },{    
                test: /\.css?$/,    
                loaders: Ex.extract({fallback: "style-loader", use: "css-loader"})
                // loader: Ex.extract("style-loader", "css-loader"),  
                // loaders:["style-loader", "css-loader"]  
              },{  
                test: /\.(png|jpg|gif)$/,  
                loader: 'url-loader?limit=8192&name=./image/[name].[ext]?[hash]'  
              }  
        ]  
    },  
    resolve: {  
        extensions: ['.coffee','.js']  
    },  
  };  
注意,css的loader的写法,如果写成下面这样会报错,可能是版本原因吧!

Ex.extract("style-loader","css-loader")

二、在安装完css抽离的插件后,我们可以安装html-webpack-plugin,

html-webpack-plugin可以根据你设置的模板,在每次运行后生成对应的模板文件,同时所依赖的CSS/JS也都会被引入,如果CSS/JS中含有hash值,则html-webpack-plugin生成的模板文件也会引入正确版本的CSS/JS文件。

安装之后,我们的webpack.config.js更改如下:

var precss = require('precss');
var cssnext = require('cssnext');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var Ex = require('extract-text-webpack-plugin');
var webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {  
    //entry 入口文件 让webpack用哪个文件作为项目的入口  
    entry: {  
        index: './view/index.js',  
    },  
    //output 出口 让webpack把处理完成的文件放在哪里  
    output: {  
      path: __dirname+'/dist',  
      filename: '[name].[hash].js'  
    },  
    plugins:[
        new HtmlWebpackPlugin({
            title: "This is the result",
            filename: "./index.html",
            template: "./app/index.html",
            inject: "body",
            favicon: "",
            minify: {
                caseSensitive: false,//是否大小写敏感
                collapseBooleanAttributes: true,//是否大小写敏感
                collapseWhitespace: true//是否大小写敏感
            },
            hash: true,
            cache: true,
            showErrors: true,
            chunks: "",
            chunksSortMode: "auto",
            excludeChunks: "",
            xhtml: false
        }),
        new Ex('./style/[name].[hash].css')//生成一个css文件
    ],
    //时刻监听文件的更新  
    watch: true,  
    watchOptions: {  
        ignored: /node_modules/  
    },  
    //module 模块 要用什么不同的模块来处理各种类型的文件  
    module: {  
        loaders: [  
            {  
                test: /\.jsx?$/,  
                loader: 'babel-loader',//采用babel模块  
                exclude: /node_modules/,//忽略mode_modules的代码  
                query: {  
                    presets: ['es2015','react']//解析es6和react语言  
                }  
            },{    
                test: /\.css?$/,    
                loaders: Ex.extract({fallback: "style-loader", use: "css-loader"})
                // loader: Ex.extract("style-loader", "css-loader"),  
                // loaders:["style-loader", "css-loader"]  
              },{  
                test: /\.(png|jpg|gif)$/,  
                loader: 'url-loader?limit=8192&name=./image/[name].[ext]?[hash]'  
              }  
        ]  
    },  
    resolve: {  
        extensions: ['.coffee','.js']  
    },  
  };  

  • title: 生成的HTML模板的title,如果模板中有设置title的名字,则会忽略这里的设置

  • filename: 生成的模板文件的名字

  • template: 模板来源文件

  • inject: 引入模块的注入位置;取值有true/false/body/head

  • favicon: 指定页面图标;

  • minify: 是html-webpack-plugin中集成的 html-minifier ,生成模板文件压缩配置

  • hash: 是否生成hash添加在引入文件地址的末尾,类似于我们常用的时间戳,避免缓存带来的麻烦

  • cache: 是否需要缓存,如果填写true,则文件只有在改变时才会重新生成

  • showErrors: 是否将错误信息写在页面里,默认true,出现错误信息则会包裹在一个pre标签内添加到页面上

  • chunks: 引入的模块,这里指定的是entry中设置多个js时,在这里指定引入的js,如果不设置则默认全部引入

  • chunksSortMode: 引入模块的排序方式

  • excludeChunks: 排除的模块

  • xhtml: 生成的模板文档中标签是否自动关闭,针对xhtml的语法,会要求标签都关闭,默认false

运行后生成如下的html:

<head>
    <meta charset="UTF-8">
    <title>我的webpack</title>
    <link href="./style/index.8574a0d53ebeb4201b94.css?8574a0d53ebeb4201b94" rel="stylesheet">
</head>

<body>
    <div id="container"></div>
    <script type="text/javascript" src="index.8574a0d53ebeb4201b94.js?8574a0d53ebeb4201b94"></script>
</body>
<script src="../js/common/jquery.min.js"></script>

</html>



©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页