抓不住的月光

抓不住的月光 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

抓不住的月光 赞了问题 · 2019-10-23

解决requestAnimationFrame如何控制帧速?

想在canvas里实现动画,动画是每帧都画在Sprite上连成一张图的,试过用setTimeout实现动画,发现会跳帧,但是requestAnimationFrame无法控制帧速,我希望1s画7帧该怎么办?

关注 4 回答 3

抓不住的月光 收藏了问题 · 2019-10-23

requestAnimationFrame如何控制帧速?

想在canvas里实现动画,动画是每帧都画在Sprite上连成一张图的,试过用setTimeout实现动画,发现会跳帧,但是requestAnimationFrame无法控制帧速,我希望1s画7帧该怎么办?

抓不住的月光 收藏了问题 · 2019-08-08

请问parcel怎么使用css样式?

我引入了一个样式文件,里面定义了.container的样式,然后使用 parcel 运行,发现样式不起作用。

我配置了 postcss:

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    },
    "precss": {}
  }
}
<!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">
  <link rel="stylesheet" href="./style.css">
  <title>test</title>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
  <script data-original="./index.js"></script>
</body>
</html>

经过排查后发现,我页面当中的class名是.container,经过parcel 编译转换后的 css 文件中,原来 .container的名字,被转换成了:._container_uquia_5,因为class名都不一样了,当然样式就不生效了,请问这要怎么办?

我把postcss的配置去掉就正常了。

抓不住的月光 赞了问题 · 2019-08-08

解决请问parcel怎么使用css样式?

我引入了一个样式文件,里面定义了.container的样式,然后使用 parcel 运行,发现样式不起作用。

我配置了 postcss:

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    },
    "precss": {}
  }
}
<!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">
  <link rel="stylesheet" href="./style.css">
  <title>test</title>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
  <script data-original="./index.js"></script>
</body>
</html>

经过排查后发现,我页面当中的class名是.container,经过parcel 编译转换后的 css 文件中,原来 .container的名字,被转换成了:._container_uquia_5,因为class名都不一样了,当然样式就不生效了,请问这要怎么办?

我把postcss的配置去掉就正常了。

关注 5 回答 4

抓不住的月光 提出了问题 · 2018-11-08

webpack4 无法抽取scss公共模块

首先测试了提取css公共模块没有问题,配置如下:

    optimization: {
        splitChunks: {
            cacheGroups: {
                // 分离引用2次以上的公共Css/Js模块
                common: {
                    name: 'common',
                    chunks: 'all',
                    minChunks: 2, // 最小被引用次数
                    minSize: 0 // 最小体积(默认30000)
                }
            }
        }
    }  
            {
                test: /\.css$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../" // 单独配置css文件中url引用路径
                        }
                    },
                    "css-loader",
                ]
            },
   plugins: [
        new CleanWebpackPlugin(['dist']),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css', // 入口文件引用的css输出
            chunkFilename: "css/[name].css" // 非入口文件,如公共css
        })
    ]
在index.js和about.js两个入口分别引入了index.css和about.css

index.css

@import 'css-common.css';
.box-1{...}

about.css

@import 'css-common.css';
.box-2{...}
打包生成了index.css,about.css,common.css三个文件

然后将css全换成scss加载

            {
                test: /\.scss$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    "css-loader",
                    "sass-loader"
                ]
            }
splitChunks和plugins不变,在index.js和about.js分别引入了index.scss和about.scss

index.scss

@import 'css-common.scss';
box-1{...}

about.scss

@import 'css-common.scss';
box-2{...}
打包后只生成了index.css和about.css两个文件,common未被提取,两个css中均包含了重复的css-common.scss中的内容

求解这是怎么回事?拜谢各位解答

关注 2 回答 2

抓不住的月光 提出了问题 · 2018-10-27

webpack4.x配置中的问题

目录结构

图片描述

webpack.config.js配置文件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: {
        app: './src/js/index.js', 
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js', //入口文件输出路径
        chunkFilename: 'js/async/[name].js' //非入口文件输出路径
    },
    module: {
        rules: [{
                test: /\.css$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../' //单独配置css文件中url引用路径
                    },
                }, { loader: 'css-loader' }]
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 8192, //小于8k的图片转为base64,不生产图片文件
                        name: '[name].[ext]',
                        outputPath: 'imgs/'
                    }
                }]
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
            chunkFilename: "css/async/[name].[contenthash].css" //不知道是什么鬼玩意
        })
    ],
}
入口文件index.js
import '../css/main.css';
import '../css/clearfix.css';

// 异步加载模块
let btn = document.querySelector('.btn');
btn.addEventListener('click', function() {
    require.ensure([], function() {
        let print = require('./print.js').default;
        print();
    },'async.print')
})

首先编译了一次,输出了dist
一切正常

图片描述


然后添加了一个配置
    optimization: {
        splitChunks: {
            cacheGroups: {
                styles: {
                    name: 'styles',
                    test: /\.(css|scss)$/,
                    chunks: 'all',
                    minChunks: 1,
                    reuseExistingChunk: true,
                    enforce: true
                }
            }
        }
    },
再次webpack编译,输出了dist

图片描述



问题:

1、optimization.cacheGroups添加以后,mini-css-extract-plugin配置中的chunkFilename替代了filename,难道cacheGroups导致css也变成异步加载的模块了?
2、为什么新生成了一个style.js? 因为index.js引用了css?而且还跑到异步模块的文件夹async里面去了。

球解答其中的原理?感觉webpack4比3还更难用了

关注 2 回答 2

抓不住的月光 回答了问题 · 2018-10-21

解决请问parcel怎么使用css样式?

同样的问题 一加上.postcssrc class的命名就被改了 不知道什么鬼。

关注 5 回答 4

抓不住的月光 赞了问题 · 2018-09-25

webpack 打包html里面img标签的图片怎么自定义输出路径

我现在打包之后dist里面的图片路径变成这样了
clipboard.png

用的是自带的html-loader

{
    test: /\.html$/,
    use: {
        loader: 'html-loader',
        options: {
            // ignoreCustomFragments: [],
            // root: path.resolve(__dirname, 'src'),
            // attrs: ['img:src']
        }
    }
}

src下图片路径
clipboard.png
dist下的图片路径

clipboard.png

路径虽然是可以显示,项目也能运行,但是个人有强迫症,想让dist下的图片路径和src的一样,有没有搞定过这个问题

关注 8 回答 7

抓不住的月光 收藏了问题 · 2018-09-25

webpack 打包html里面img标签的图片怎么自定义输出路径

我现在打包之后dist里面的图片路径变成这样了
clipboard.png

用的是自带的html-loader

{
    test: /\.html$/,
    use: {
        loader: 'html-loader',
        options: {
            // ignoreCustomFragments: [],
            // root: path.resolve(__dirname, 'src'),
            // attrs: ['img:src']
        }
    }
}

src下图片路径
clipboard.png
dist下的图片路径

clipboard.png

路径虽然是可以显示,项目也能运行,但是个人有强迫症,想让dist下的图片路径和src的一样,有没有搞定过这个问题

抓不住的月光 赞了问题 · 2018-09-25

解决webpack打包的时候img标签中的src找不到?

我写的路径应该没问题的:
图片描述
运行后报错:
图片描述
webpack配置:

let webpack = require('webpack'),
  path = require('path'),
  HtmlWebpackPlugin = require('html-webpack-plugin'),
  ExtractTextPlugin = require('extract-text-webpack-plugin'),
  hotMiddlewareScript = 'webpack-hot-middleware/client?reload=true',
  utils = require('./utils')

var env = process.env.NODE_ENV,
  cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap),
  cssSourceMapProd = (env === 'production' && config.build.productionSourceMap),
  useCssSourceMap = cssSourceMapDev || cssSourceMapProd;

module.exports = {
  devtool: 'eval-source-map', //配置生成Source Maps,选择合适的选项

  entry: {
    desktop: [path.resolve(__dirname, '../src/main.js'), hotMiddlewareScript],
  },
  output: {
    path: path.resolve(__dirname, '../dist'), //打包后的文件存放的地方
    publicPath: '/',
    filename: '[name].js'
  },

  resolve: {
    extensions: ['', '.js'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'scss': path.resolve(__dirname, '../src/scss')
    }
  },

  module: { //在配置文件里添加JSON loader
    loaders: [{
      test: /\.json$/,
      loader: "json"
    }, {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel'
    }, {
      test: /\.css$/,
      loader: 'style!css!postcss' //添加对样式表的处理
    }, {
      test: /\.scss$/,
      loader: 'style!css!sass?sourceMap'
    }, {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: 'url?limit=10000&name=images/[name].[ext]'
    }, {
      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
      loader: 'url?limit=10000&name=images/[name].[ext]'
    }]
  },

  sassLoader: {
    includePaths: [path.resolve(__dirname, "./some-folder")]
  },
  
  postcss: [
    require('autoprefixer') //调用autoprefixer插件
  ],

  plugins: [
    new webpack.BannerPlugin("Copyright B1anker."), //在这个数组中new一个就可以了
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      //渲染输出html文件名,路径相对于 output.path 的值
      filename: './index.html',
      //渲染源模版文件
      template: path.resolve(__dirname, '../src/views/index.html'),
      //这个东西非常重要,true: 自动写入依赖文件; false: 不写入依赖,构建多页面非常有用
      inject: true
    })
  ],

  devServer: {
    contentBase: "./dist", //本地服务器所加载的页面所在的目录
    colors: true, //终端中输出结果为彩色
    historyApiFallback: true, //不跳转
    inline: true //实时刷新
  }
}

如何处理呢?

关注 11 回答 6

认证与成就

  • 获得 199 次点赞
  • 获得 77 枚徽章 获得 3 枚金徽章, 获得 25 枚银徽章, 获得 49 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2015-11-30
个人主页被 2.1k 人浏览