张宇童 - 前沿技术博客

webpack开启热更新模块

2019-12-17 张宇童 学习日志

首先上代码

注意代码中的devServer

里面的hot、hotOnly都设置为true

拉下webpack的 HotModuleReplacementPlugin模块

然后实例化即可

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const webpack = require('webpack')

module.exports ={
  mode: 'development',
  devServer: {
    hot: true,
    hotOnly: true,
    contentBase: path.resolve(__dirname, 'dist')
  },
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]
}

标签: 配置 webpack

评论(0) 浏览(906)

file-loader的placeholder占位符中文文档

2019-12-11 张宇童 webpack

这篇文章是我对照着webpack官方文档一个一个翻译的，绝非右键翻译。保证同学们能看得懂

[ext] 表示 文件的后缀

[name] 表示 当前文件名

[path] 表示 相对于webpack的路径

[folder] 表示源文件所在文件夹路径

[emoji] 表示一个随机的emoji表情

[emoji:<length>]  表示 自定义随机表情的数量

[hash] 表示文件的hash值

[contenthash] 也是一个hash值只不过是内容hash 上一个是文件名hash

标签: 配置 webpack

评论(0) 浏览(892)

webpack打包配置

2019-12-11 张宇童 webpack

我写这篇文章一来是为了巩固自己的学习

二来是为了更多的同学在学习webpack中有所收获

webpack安装分为两种 一种是全局安装global

一种是局部安装local

我个人觉得我比较喜欢使用局部安装。不管然和插件

全局暗转只需要执行

npm install webpack webpack-cli -g

安装完成之后就可以是看到版本号了

webpack -v

本地安装命令一样不需要加-g

本地安装的同学大家使用webpack一定会报错 not fount webpack

因为我们没有全局安装所以在执行webpack的时候没有找到 很正常

原理很简单在termainal中执行webpack 的时候是全局的webpack

这个时候我们就可以使用npx webpack了

npx是执行局部的webpack

下面我们来看一看webpack如何使用

第一种方法是

直接执行npx webpack index.js

可以看到打包了一个js文件

第二种方法是配置一个webpack.config.js

里面的配置大家可以跟我一起写

我就不用代码高亮了，这个代码高亮的编辑器使用太麻烦。自己也懒得改

直接写了，写一句我会解释一句

const path = require('path')

这一句的意思是引入nodejs的path模块因为我们后面会使用到

module.exports = {

    mode: 'production', 

    这一句的意思是 告诉webpack我们要使用什么模式 有生产模式 和开发模式 分别为production and development

    entry: {

            main:  './src/index.js',

            sub: 'xxx.js'

    }

    这一句的意思是 告诉webpack 我们要从什么文件开始打包，我这里填写为src目录下面的index.js文件开始, 如果为对象即是打包多个文件的意思

    output: {

        这里面填写打包完成的文件放到什么地方

        filename: 'mian.js',

        这一句意思是打包完成后文件叫main.js

        path: path.resolve(__dirname, 'dist')

        这一句的意思是打包好的文件放到什么路径，我们这里填写dist目录下

    },

    module: {

        这里面是告诉webpack我们如何打包除了js以外的文件

        rules: [

            这里面填写相应的规则

            {

                test: /\.png$/,

                这一句的意思是要对png文件作出处理

                use: {

                    loader: 'file-loader',

                    这里是告诉webpack 我们要处理的png使用file-loader模块处理

                    name: '[hash]_[name].[ext]',

                    这里是告诉webpack 我们需要输出的名称

                    outputPath: 'images/',

                    这里我们告诉webpack我们这个文件要输出的地址                    

                }

            },

            {

                test: /\.scss/,

                这里设置sass文件打包设置

                use: [

                    'style-loader',

                    'css-loader',

                    'sass-loader',

                    'postcss-loader'

                    这个loader的意思是要将打包的css进行浏览器适配处理

                ]

            }

        ]

    },

    plugins: [

        new HtmlWebpackplugin([

            template: '/src/index.html'

            这里是设置模版文件

        ]),

        new CleanWebpackPlugin()

        这个插件是帮助我们自动清理打包目录的

    ]

}

标签: 配置 webpack

评论(0) 浏览(553)

Echarts使用渐变色的方法

2019-10-24 张宇童 学习日志

// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
}
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: {
    type: 'radial',
    x: 0.5,
    y: 0.5,
    r: 0.5,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
}
// 纹理填充
color: {
    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
    repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
}

{
    type: 'bar',
    itemStyle: {
        normal: {
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                [
                    {offset: 0, color: '#000'},
                    {offset: 0.5, color: '#888'},
                    {offset: 1, color: '#ddd'}
                ]                //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
            )
        }
    }
}

标签: echarts 颜色 渐变色 配置

评论(0) 浏览(2438)