关于webpack遇到的一些问题

最新推荐文章于 2020-11-30 21:04:58 发布

转载最新推荐文章于 2020-11-30 21:04:58 发布 · 113 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lyxverycool/articles/6491214.html

文章标签：

#webpack #javascript #runtime #ViewUI

本文介绍了如何在项目中配置Webpack和Babel以实现热模块替换(HMR)、Sass预处理器集成及图片资源的自动处理。主要内容包括：1. 使用Babel Preset React HMR进行热替换；2. 安装并配置Sass；3. 解决Webpack无法通过IPv4访问的问题；4. 配置Webpack处理图片资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.热替换，添加HMR功能,可以实现无刷新替换

npm install babel-preser-react-hmre --save-dev

然后配置下.babelrc

{
  "presets": [ "es2015","react"],

  /* if you want to use babel runtime, uncomment the following line */
  // "plugins": ["transform-runtime"],

  "env": {
    "development": {
      "presets": ["react-hmre"]
    }
  }
}

2.关于sass

sass除了安装sass,sass-loader,还有安装node sass

npm install --save-dev node-sass

loader如果无需分类打包，webpack配置

{ test:/\.(scss|sass)$/,include: path.resolve(__dirname, 'app'),loader:'style-loader!css-loader!sass-loader'}

3.webpack不能通过ipv4访问

具体见写的另外的文章

4.关于webpack图片打包的问题

1.在react组件中引用，也就是说在html中引用

<img src={require('../../images/test2.png')} alt=""/>

2、在css里的图片引用：

background: url("images/test3.png") 0 0 no-repeat;

webpack配置图片打包：

{ test: /\.(png|jpg)$/,include: path.resolve(__dirname, 'app'),loader: 'url-loader?name=images/[hash:8].[name].[ext]'},

还有如果是在css中写背景图片样式最好用相对路径

以上参考不由分说博客

转载于:https://www.cnblogs.com/lyxverycool/articles/6491214.html