webpack学习笔记

原创 2016年06月01日 17:02:37

webpack.config.js配置文件

var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');

var oldconfig = {
    entry: [//入口文件
      'webpack/hot/dev-server',
      'webpack-dev-server/client?http://localhost:8080',//前两行浏览器自动刷新
      path.resolve(__dirname, 'app/main.js')
    ],
    output: {//出口文件
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js',
    },
};

var config = {
    entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'app/main.js')],
    resolve: {
        alias: {
            'react': pathToReact    //每当 "react" 在代码中被引入,它会使用压缩后的 React JS 文件,而不是到 node_modules 中找
        }
    },
    output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
    },
    module: {
    loaders: [{
        test: /\.jsx?$/, // 用正则来匹配文件路径,这段意思是匹配 js 或者 jsx
        loader: 'babel' // 加载模块 "babel" 是 "babel-loader" 的缩写
    }, {
      test: /\.css$/, // Only .css files
      loader: 'style!css' // Run both loaders:css-loader会遍历 CSS 文件,然后找到 url() 表达式然后处理他们,style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中
    },
    // LESS
    {
      test: /\.less$/,
      loader: 'style!css!less'
    },
    // SASS
    {
      test: /\.scss$/,
      loader: 'style!css!sass'
    }, 
    //png&jpg
    {
      test: /\.(png|jpg)$/,
      loader: 'url?limit=25000'//把需要转换的路径变成 BASE64 字符串, limit 参数是告诉它图片如果不大于 25KB 的话要自动在它从属的 css 文件中转成 BASE64 字符串
    }],
    noParse: [pathToReact]  //每当 Webpack 尝试去解析react压缩后的文件,阻止它
    }
};

// 通过在第一部分路径的依赖和解压
// 就是像你引用 node 模块一样引入到你的代码中
// 然后使用完整路径指向当前文件,然后确认 Webpack 不会尝试去解析它

var deps = [
  'react/dist/react.min.js',
  'react-router/dist/react-router.min.js',
  'moment/min/moment.min.js',
  'underscore/underscore-min.js',
];

deps.forEach(function (dep) {
  var depPath = path.resolve(node_modules_dir, dep);
  config.resolve.alias[dep.split(path.sep)[0]] = depPath;
  config.module.noParse.push(depPath);
});

module.exports = config;

package.json

{
  ...
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build",
  },
  ...
  "devDependencies": {
    "babel-core": "^6.9.0",
    "babel-loader": "^6.2.4",
    "css-loader": "^0.23.1",
    "file-loader": "^0.8.5",
    "react-hot-loader": "^1.3.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.1"
  },
  "dependencies": {
    "react": "^15.1.0",
    "webpack-dev-server": "^1.14.1"
  }
}

dev中命令的含义

  • webpack-dev-server - 在 localhost:8080 建立一个 Web 服务器
  • –devtool eval - 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
  • –progress - 显示合并代码进度
  • –colors - Yay,命令行中显示颜色!
  • –hot
  • –content-base build - 指向设置的输出目录

热加载配置

webpack.config.js

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './index'
  ],
  ...
  plugins: process.env.NODE_ENV === 'production' ? [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin()
  ] : [
    new webpack.HotModuleReplacementPlugin()
  ],
}

server.js 架设一个http服务器

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
  if (err) {
    return console.log(err);
  }
  console.log('Listening at localhost:3000');
});
版权声明:本文为博主原创文章,转载请注明出处。

相关文章推荐

nodejs与Express4配合搭建网站

最近用nodejs和Express试了一下搭建网站,感觉速度还是相当快的,总结一下,好记性不如烂笔头!node的安装可以直接到官网下载最新版本,安装就好。 node安装好后我们来依次安装,其中-g表...
  • SirM2z
  • SirM2z
  • 2015-08-04 12:50
  • 1058

css3学习笔记(六)----Media Queries(媒体样式) 与Responsive(响应式)

1,媒体类型:其中Screen、All和Print为最常见的三种媒体类型。 值 设备类型 All 所有设备 ...

css3学习笔记(五)---布局样式相关

1,多列布局--columns: column-width:列宽,如200px column-count:列数,如5 column-gap:列之间的间距,如50px column-rule:列之间...

cocos2d-js学习笔记---场景转换(scene),颜色图层,变量获得

一:场景转换(Scene) 1,场景栈---pushScene(进栈,显示临时场景),popScene(出栈,显示上一个场景):现有A,B场景,A场景正在运行,需要临时进入B场景,即一会还要回A...
  • SirM2z
  • SirM2z
  • 2015-06-21 16:20
  • 1758

template.js插件--好用的模板插件

template.js是一款JavaScript模板引擎,简单好用,而且只有5K左右哦! 最近刚好做一个工程用到了,就来总结下。 原理:提前将Html代码放进一个中,当需要用到时,在js里这样调用...
  • SirM2z
  • SirM2z
  • 2015-08-01 15:44
  • 2731

C#简单生成订单编号--通过精确到毫秒的时间格式

C#生成订单编号的一个简单方法,仅适用于小数据,因为这个方法是通过将时间精确到毫秒来生成编号,面对大数据,也有可能“撞衫”! System.DateTime.Now.ToString("yyyyMM...
  • SirM2z
  • SirM2z
  • 2015-08-03 17:50
  • 1810

DOM事件学习笔记

事件流:描述的是从页面中接收事件的顺序 事件冒泡:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档),如下 //当点击按...

css3学习笔记(一)

CSS3学习笔记 一,兼容性 二,边框 三,颜色 四,文字,文本

Web列表分页--(单页web)容易上手的方法

列表是后台管理中经常用到的,为了提高效率,我们需要将它进行分页获取,接下来讲一下自己将常用的一套写法,其中用到了template.js这个轮子,可以参考我的另一篇文章:template.js插件--好...

css3学习笔记(四)---变形与动画

变形 1,旋转--rotate():以中心为原点旋转,正值顺时针,负值逆时针 #test { transform:rotate(20deg); -webkit-transform: ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)