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) 浏览(653)

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) 浏览(626)

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) 浏览(434)

Powered by emlog