webpack基础知识,笔记

webpack是一个打包工具,一般一个js认为是一个模块,webpack默认只能识别js文件,如果要打包其他的如图片,txt,css等就需要使用loader。loader告诉webpack如何去打包对应的文件

样式loader:写css的方法有很多,less,scss,stylus最常见,每一种方法打包的时候需要3个loader,用stylus举例,它需要3个loader:stylus-loader css-loader stylus-loader,各自作用:

style-loader:把css挂在到dom上

css-loader:处理css

styus-loader:处理styus,转化为css

devtool:报错提示,可以很清楚的定位到错误行数以及该行内的第多少字符。开发环境建议用 cheap-module-eval-source-map ,报错可以定位到本地原始(打包之前)代码的文件以及行数,因为要准确定位到某个字符会消耗性能,所以建议定位到错误的行数就可以

热更新:

  先安装  npm install webpack-dev-server -D

  然后在package.json里面修改命令  "dev": "webpack-dev-server"

  引入webpack  const webpack = require("webpack");   // 为了使用hmr

  添加配置项

    devServer: {
      contentBase: './dist',
      hot: true,
      hotOnly: true, // hmr不生效的时候也不让页面刷新
    }
  Plungin里面添加  new webpack.HotModuleReplacementPlugin()
  入口文件更新:   

    if (module.hot) {
      module.hot.accept(')// 利用这个方法来更新代码修改之后对应页面的修改
    }

原文地址:https://www.cnblogs.com/hamili/p/11255200.html