webpack问题

1.在HTML中加入图片<img src="..." alt="">，补充loader

html-withimg-loader

安装：cnpm install html-withimg-loader -S

配置webpack-config.js：

{test:/\.html$/,use:'html-withimg-loader'}

2.字体图标<i>，bootstrap内的图标等：

配置：

{test:/\.(woff|ttf|eot|svg|xttf|woff2)$/,use:"file-loader?limit=1024&name=.fonts/[name].[ext]"}

后面是限制public里的文件后缀的格式

webpack中css提取：

安装插件：cnpm install extract-text-webpack-plugin@next -S

配置webpack.config.js：

const ExtractTextPlugin = require("extract-text-webpack-plugin");
 module:{
        rules:[
            {test:/\.css$/,use:ExtractTextPlugin.extract({
                fallback:"style-loader",
                use:[{loader:"css-loader",options:{minimize:true}}],
                publicPath:"../"
            })},
//......
plugins:[
        //....
        new ExtractTextPlugin('./css/[name].css')
    ]

webpack引入第三方库：

安装jQuery：cnpm install jquery -S

直接在文件中引入