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');
});
版权声明:本文为博主原创文章,转载请注明出处。

webpack学习笔记

webpack 配置文件 打包工具 前段自动化
  • SirM2z
  • SirM2z
  • 2016年06月01日 17:02
  • 812

30分钟手把手教你学webpack实战

30分钟手把手教你学webpack实战
  • wyqlxy
  • wyqlxy
  • 2016年08月30日 09:41
  • 672

Webpack学习笔记

下载傻瓜版Webpack示例项目webpack-demopackage.json示例 { "name": "camera", "version": "1.0.0", ...
  • u011500781
  • u011500781
  • 2017年03月11日 18:07
  • 449

webpack 学习笔记

简单学习笔记webpack的目标 1. 切分他的依赖树,按需加载 2. 缩短初始化加载时间 3. 任何静态模块都可以视为一个模块在项目中引用 4. 整合第三方类库,并且把第三方的类库作...
  • xiaowoniuqiren
  • xiaowoniuqiren
  • 2017年03月07日 10:27
  • 111

webpack项目部署步骤

1.本地电脑安装webpack  1.1首先安装node 官网下载安装好 命令行输入node-v 出现如下版本号即成功安装 1.2 安装webpack   //全局安装 命令行输入 n...
  • dream_catcher123
  • dream_catcher123
  • 2016年12月13日 11:24
  • 2714

webpack学习笔记

一、安装webpack 我们通过 npm 全局安装 webpack: npm install webpack -g 安装完成后,我们可以使用 webpack 命令,执行 webpack -...
  • wushaoxion
  • wushaoxion
  • 2016年10月03日 21:15
  • 1567

学习笔记webpack

额工作了三年都没写过博客。 现在开始养成习惯吧。 拉下的技术是时候学回来了,看了一天的webpack入门。 项目使用webpack步骤: 1、项目文件初始目录 根目录--/app/--main.j...
  • u012773861
  • u012773861
  • 2018年01月04日 09:32
  • 16

webpack学习笔记

是什么webpack是一个模块打包工具,通过依赖处理模块,并生成那些模块静态资源。 观察上图,webpack把所有的资源(js,css和图片等)都当做是模块——webpack中可以引用css,c...
  • zhbhun
  • zhbhun
  • 2015年08月02日 17:07
  • 8686

前端--React之webpack使用教程

记住:一定要一步一步的跟着执行,不要漏过任何一部项目的文件架构为: 最近在学习react,记录一下在学习webpack过程中的经历,希望帮助新人少走弯路。 1、新建一个测试目录,这里叫做React...
  • zhuzhiqiang_zhu
  • zhuzhiqiang_zhu
  • 2016年12月07日 15:03
  • 1974

细说webpack之流程篇

引言 目前,几乎所有业务的开发构建都会用到 webpack 。的确,作为模块加载和打包神器,只需配置几个文件,加载各种 loader 就可以享受无痛流程化开发。但对于 webpack 这样一个复杂度...
  • yingxiaoqiang520
  • yingxiaoqiang520
  • 2017年02月23日 18:25
  • 354
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:webpack学习笔记
举报原因:
原因补充:

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