webpack使用的心得

1 . 我们需要使用打包工具，首先第一步就得 执行 npm install进行安装，可是很多时候 加载速度很慢，这个时候我们可以 用淘宝镜像源，参考地址：

https://npm.taobao.org/

 

使用方法如下：

 

npm install  --registry=https://registry.npm.taobao.org

 

全局配置镜像源：

 

淘宝镜像：在命令行中敲入npm config set registry=https://registry.npm.taobao.org

 

朗沃服务器镜像：在命令行中敲入npm config set registry=http://192.168.8.10:7001

 

 

这样速度就加快了很多了，不信请试试

 

或者直接安装 cnpm ,

安装cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm -v 确认是否安装成功。以后加载模块直接使用 cnpm

以后安装包的时候就直接 cnpm install webpack速度就会快很多

 

 

2. 另外一个 是我们在项目中一般是 本地开发的时候一个 配置文件，发布的时候一个 配置文件，那如果我项目中配置本来不是很多的情况下，我不想分几个配置文件，只用一个webpack.config.js，可以是这样的话 我们就需要针对不用的开发环境 对配置进行管理，通常在插件里配置：

 

 

new webpack.DefinePlugin({
	'process.env': {
	'NODE_ENV': '"production"'
  }
})

 

然后在package.json文件里配置变量：

如：process.env是一个环境变量，所以需要你设置NODE_ENV变量， 

on OS X or Linux:  export NODE_ENV=development

windows:   SET NODE_ENV=development

完整的命令如下：

export NODE_ENV=development && webpack  或者

export NODE_ENV=development && webpack-dev-server --inline

3. 还有一个 我们比较关注的是，在项目中我们希望打包多个css文件，在项目中根据情况引用，可以参考如下链接，讲解的非常清楚：

https://webpack.github.io/docs/stylesheets.html

4. 在项目中如果需要有全局变量，得用window去定义，比如有一个global.js文件里，如果需要把某个函数或者变量当成全局的，则可以这样：

global.js：

window.globalFun=function() {
　　var test='123';
　　console.log(test);
}

　　在global.html文件引入global.js，这样在各个.js/.jsx文件就可以直接用globalFun这个全局函数了。

5. 在项目比较大的情况下，会有很多输入的文件，我们不可能手动的去一个个添加配置，因为文件也会随时变化，包括文件名也可以会做修改，所以我们可以用glob插件帮我们做正则匹配，

安装：npm install glob

使用：var glob=require('glob');

var files = glob.sync(path.join(staticPath, '*/js/*.jsx'));
var newEntries = {};

files.forEach(function(file){
    var substr = file.match(/resources/static(S*).jsx/)[1];
    var strObj=substr.split('/');
    if(strObj[1]=='public') {
        if(/global_page/.test(strObj)) {
            newEntries[substr] = file;
        }
    }
    else {
        newEntries[substr] = file;
    }
});

commonOptions.entry = newEntries;
console.log(newEntries);

 

 

 6. 在项目中对图片的打包路径和格式