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']
}

上一篇:使用VUE CLI3.0搭建项目vue2+scss+element简易版


下一篇:vue项目中 路径使用的@和~的区别