webpack 基础 - 02 （打包css、less、scss、html文件）

1、打包css文件

         安装css-loader(打包css文件)  style-loader(将打包后的结果添加到html中)

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

         在配置文件中添加：

 {
    test: /\.css$/, //检测是否是css文件
    use: ["style-loader", "css-loader"], //用css-loader处理文件，再用style-loader插入到html
 },

2、html打包

          安装html-webpack-plugin插件

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

          然后在配置文件中引入：

//引入html-webpack-plugin
const HtmlWebpackPlugin = require("html-webpack-plugin");

          配置：

plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",//打包的html文件
      filename:'index.html',//打包后的文件名称
    }),
],

3、打包less文件

          安装  npm  install  less less-loader  --save-dev

          配置：

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

4、打包scss文件

          安装  npm  install  sass-loader node-sass --save-dev

          配置：

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