[关闭]
@lizlalala 2016-08-09T04:37:50.000000Z 字数 1429 阅读 894

webpack配置问题总结

webpack


1.webpack-dev-server和node 服务器之间关系的问题

我们开发时可以选择不用dev-server,直接webpack,打包到比如

![output](http://i3.buimg.com/36f211bd3a7bf7d5.png)

目录下(也就是webpack.config.js中output指定的位置):
  1. BUILD_DIR = path.join(__dirname,'build',"javascripts","entries"),
  2. output:{
  3. path:BUILD_DIR,
  4. filename:"[name].bundle.js",

然后在html中引入该文件:

html中引入bundle


(1)入口文件更改:

//webpack.config.js

(2)webpack编译到服务器的位置

//webpack.config.js

即图中publicPath的位置。

(3)node服务器查找资源的位置

//server.js

其中的publicPath

(4)html页面关联的js目录更改

//your.html

现在运行run dev,开启服务器,就可以愉快的实时刷新啦(就跟sublime里面markdown可以实时在浏览器里刷一个样纸。不需要手动重新编译打包blahblah,完全解放双手。。。感天动地。。)

readed

WEBPACK DEV SERVER

2.scss

在webpack中,一切都是模块,在此之前,我们通常把js一个个模块独立开,然后import或者require进来,再通过browserify去进行打包。现在webpack不光可以实现这个功能,连css这些资源也可以视为模块,举例来说。
我们需要给Header组件增添样式,于是,新建Header.scss文件

  1. @import "../../stylesheets/reset.css";
  2. .header{
  3. .share-btn{
  4. padding: 20px;
  5. background-color:#abd;
  6. }
  7. }

然后webpack.config.js中指定loader

  1. {
  2. test:/\.scss$/,
  3. loaders:['style','css','sass'],
  4. //loader:"style!css!sass" //run from right to left
  5. },

首先会用sass-loader编译成css,css-loader处理里面的url模块加载,style-loader将css样式插入到页面中的style标签中。(loader是从右到左加载,从下到上)。

紧接着,我们就可以在js文件中引入样式了(是的。。。不需要在html中引入link标签),跟引入js一样。

  1. //Header.js(定义Header组件js)
  2. import React from "react";
  3. import ReactDom from "react-dom";
  4. import "./Header.scss";
  5. ...your component
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注