美文网首页Web前端之路1024Vue.js
3、webpack添加样式处理

3、webpack添加样式处理

作者: 圆梦人生 | 来源:发表于2019-07-25 17:24 被阅读4次

基础环境搭建

通过require导入的样式是无法被识别的,需要加载器:

接着基础工程添加样式处理:

  • 1、安装样式插件
    yarn add less-loader css-loader style-loader -D
    
  • 2、src文件夹创建a.css、b.css、c.less
    • 2-1 index.js导入a.css、c.less
     require('./a.css');
     require('./c.less');
    
    • 2-2、a.css
    @import 'b.css';
    body {
      background-color: #ddaadd;
    }
    
    • 2-3、b.css
     body {
      font-size: 22px;
    }
    
    • 2-4、c.less
    @appBorder: 1px solid yellow;
    
    body {
      #app {
        border: @appBorder;
      }
    }
    
  • 3、webpack.config.js添加样式处理规则
      // 模块处理
      module: {
          // loader
          rules: [
              {
                  test: /\.css$/, //匹配css文件
                  // css-loader 处理css文件@import嵌套
                  // style-loader 把css插入header
                  // 多个loader需要数组,单个可写成字符串
                  // loader顺序:从右向左执行,从下到上,单个loader可添加更多配置,使用对象形式
                  // use: [{loader: 'style-loader', options: ...}, 'css-loader']
                  use: [{
                     loader: 'style-loader',
                     options: {
                         // 样式插入到顶部
                         insertAt: 'top'
                     }
                  }, 'css-loader']
              },
              {
                  test: /\.less$/, //匹配less文件
                  // css-loader 处理css文件@import嵌套
                  // style-loader 把css插入header
                  // 多个loader需要数组,单个可写成字符串
                  // loader顺序:从右向左执行,从下到上,单个loader可添加更多配置,使用对象形式
                  // use: [{loader: 'style-loader', options: ...}, 'css-loader']
                  use: [{
                     loader: 'style-loader',
                     options: {
                         // 样式插入到顶部
                         insertAt: 'top'
                     }
                  }, 'css-loader', 'less-loader']
              }
          ]
      }
    

webpack.config.js完整配置:

//  webpack是node写出来的, 需要node的写法
let path = require('path');
// path.resolve 相对路径转成绝对路径
// console.log(path.resolve('dist'));
// 以当前目录
// console.log(__dirname);

// html-webpack-plugins 插件
let HtmlWebpackPlugins = require('html-webpack-plugin');

// webpack相关配置
module.exports = {
    // 开发服务的配置
    devServer: {
        // 端口,默认8080
        port: '8099',
        // 进度条
        progress: true,
        // 启动后访问目录,默认是项目根目录,这个设置到打包后目录
        contentBase: './build',
        // 启动压缩
        compress: true
    },
    // 模式,2种:生产模式(production)和开发模式(development)
    // 开发模式不压缩打包后代码,生产模式压缩打包后代码
    mode: 'development',
    // 入口,表示从哪里开始打包
    entry: './src/index.js',   
    // 表示出口(输出后文件相关配置)
    output: {   
        // 打包后的文件名,产生哈希
        //filename: 'bundle.[hash].js',  
        // 哈希8位
        filename: 'bundle.[hash:8].js',  
        // 输出后的路径(必须是一个绝对路径)
        path: path.resolve(__dirname, 'dist')
    },
    // 插件配置
    plugins: [
        new HtmlWebpackPlugins({
            // 模板位置
            template: 'index.html',
            // 文件名
            filename: 'index.html',
            // 生产开启,压缩代码
            minify: {
                // 删除html双引号
                removeAttributeQuotes: true,
                // 压缩成一行
                collapseWhitespace: true
            },
            // 文件哈希
            hash: true
        })
    ],
    // 模块处理
    module: {
        // loader
        rules: [
            {
                test: /\.css$/, //匹配css文件
                // css-loader 处理css文件@import嵌套
                // style-loader 把css插入header
                // 多个loader需要数组,单个可写成字符串
                // loader顺序:从右向左执行,从下到上,单个loader可添加更多配置,使用对象形式
                // use: [{loader: 'style-loader', options: ...}, 'css-loader']
                use: [{
                   loader: 'style-loader',
                   options: {
                       // 样式插入到顶部
                       insertAt: 'top'
                   }
                }, 'css-loader']
            },
            {
                test: /\.less$/, //匹配less文件
                // css-loader 处理css文件@import嵌套
                // style-loader 把css插入header
                // 多个loader需要数组,单个可写成字符串
                // loader顺序:从右向左执行,从下到上,单个loader可添加更多配置,使用对象形式
                // use: [{loader: 'style-loader', options: ...}, 'css-loader']
                use: [{
                   loader: 'style-loader',
                   options: {
                       // 样式插入到顶部
                       insertAt: 'top'
                   }
                }, 'css-loader', 'less-loader']
            }
        ]
    }
}

index.html完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index</title>
</head>
<body>
    <div id="app">App Info</div>
</body>
</html>

相关文章

网友评论

    本文标题:3、webpack添加样式处理

    本文链接:https://www.haomeiwen.com/subject/hpxkrctx.html