webpack学习笔记（二）：管理资源

参考教程：https://www.webpackjs.com

1.加载CSS

安装：

npm install style-loader css-loader --save-dev

webpack.config.js中module.exports的module:

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

webpack使用正则表达式将所有.css结尾的文件提供给style-loader,css-loader.

创建一个style.css

h2{
    color: red;
}

引入到index.js中

require('./style.css');

重新打包。结果：index.html的标签下自动多了个

2.加载图片

npm install file-loader --save-dev

webpack.config.js中module的rules中添加

{
   test: /\.(png|svg|jpg|gif)$/,
   use: ['file-loader']
 }

css中引用的图片以及js中的引用的图片都会打包.

html中引用的图片呢？（不要着急，不要着急，休息，休息一会…）

3.加载字体

webpack.config.js中module的rules中添加

{
   test: /\.(woff|woff2|eot|ttf|otf)$/,
   use: ['file-loader']
 }

4.加载数据

加载JSON 文件（内置的），CSV、TSV 和 XML

npm install --save-dev csv-loader xml-loader

webpack.config.js中module的rules中添加

{
 test: /\.(csv|tsv)$/,
 use: [
   'csv-loader'
 ]
},
{
 test: /\.xml$/,
 use: [
   'xml-loader'
 ]
}

5.多bundle文件

entry: {
        app: './src/index.js',
        print: './src/print.js'
    }

output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, 'dist')
    }

[name]就是entry里面的key

6.自动生成index.html

npm install --save-dev html-webpack-plugin

webpack.config.js修改：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports中plugins

plugins: [
        new HtmlWebpackPlugin({
            title: 'lala'
        })
    ]

7.清除目录

npm install clean-webpack-plugin --save-dev

webpack.config.js修改：

const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports中plugins中添加

new CleanWebpackPlugin(['dist'])

这样dist目录里，都是构建后新的文件。