webpack第三方模块处理样式、字体、图片、等

续上一篇blog：使用webpack和webpack-dev-server

使用html-webpack-plugin插件配置启动页面

• 由于使用–contentBase指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性，所以推荐大家使用html-webpack-plugin插件配置启动页面.

1. 运行cnpm i html-webpack-plugin --save-dev安装到开发依赖
2. 修改webpack.config.js配置文件如下：

    // 导入处理路径的模块
    var path = require('path');
    // 导入自动生成HTMl文件的插件
    var htmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
        output: { // 配置输出选项
            path: path.resolve(__dirname, 'dist'), // 配置输出的路径
            filename: 'bundle.js' // 配置输出的文件名
        },
        plugins:[ // 添加plugins节点配置插件
            new htmlWebpackPlugin({
                template:path.resolve(__dirname, 'src/index.html'),//模板路径
                filename:'index.html'//自动生成的HTML文件的名称
            })
        ]
    }

3. 修改package.json中script节点中的dev指令如下：

   "dev": "webpack-dev-server"

4. 将index.html中script标签注释掉，因为html-webpack-plugin插件会自动把bundle.js注入到index.html页面中！

使用webpack打包css文件

1. 运行cnpm i style-loader css-loader --save-dev
2. 修改webpack.config.js这个配置文件：

   module: { // 用来配置第三方loader模块的
            rules: [ // 文件的匹配规则
                { test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
            ]
        }

3. 注意：use表示使用哪些模块来处理test所匹配到的文件；use中相关loader模块的调用顺序是从后向前调用的；

使用webpack打包less文件

1. 运行cnpm i less-loader less -D
2. 修改webpack.config.js这个配置文件：

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

使用webpack打包sass文件

1. 运行cnpm i sass-loader node-sass --save-dev

2. 在webpack.config.js中添加处理sass文件的loader模块：

   { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

使用webpack处理css中的路径

1. 运行cnpm i url-loader file-loader --save-dev

2. 在webpack.config.js中添加处理url路径的loader模块：

   { test: /\.(png|jpg|gif)$/, use: 'url-loader' }

3. 可以通过limit指定进行base64编码的图片大小；只有小于指定字节（byte）的图片才会进行base64编码：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },

处理字体文件

{ test: /\.(eot|svg|ttf|woff|woff2)$/, use: 'url-loader'} //处理字体文件的loader 配置项

• 推荐分开写，这样简洁美观，当然也可以和路径和在一起

总配置-目前

 module: {//配置第三方模块加载器
        rules: [//第三方模块 匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },//配置处理.css 的第三方loader规则
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },//配置处理less文件第三方 loader规则
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },//配置处理sass 第三方loader 规则
            { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=2&name=[hash:8]-[name].[ext]' },//处理图片路径的loader
            // 传参：limit 给定的值是图片大小，单位是byte，值>=图片，就会转base64，反之则不会
            //[hash:8] 在每张图片名字前面给一个哈希值最大32，解决图片不同文件夹重名打包问题
            { test: /\.(eot|svg|ttf|woff|woff2)$/, use: 'url-loader'} //处理字体文件的loader 配置项
        ]
    },

• 当然 正式开发 不会用那么多样式类型，这里只是举栗子