关于webpack遇到的一些问题

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