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 是模块打包器(module bundler)。 在 webpack 里,所有类型的文件都可以是模块,包含我们最常见的 JavaScript,以及 css 文件、图片、json 文...
  • bgk083
  • bgk083
  • 2016年01月22日 10:00
  • 631

Gulp学习笔记(三):与webpack结合

gulp学习笔记之三:与webpack结合使用
  • nzyalj
  • nzyalj
  • 2017年04月09日 21:35
  • 578

webpack 学习笔记 --- node.js开发

normalizr 学习笔记 — node.js开发最近开始学习Node.js开发,有很多基础知识和框架需要学习,所以打算将自己学习笔记记录下来,即可以和大家分享,也可以方便自己以后回顾知识。由于只是...

webpack学习笔记_入门基础

1、首先将全局安装或安装到目录 1.全局安装(确认是否安装成功)npm install -g webpack2.安装到目录 (首先cd 到目录下)npm install --save-dev w...

Webpack 3.0 的学习笔记(3)

最近跟着技术胖进行学习,这些是学习过程中的笔记,这是webpack3.X的第3篇笔记。 消除无用的css 使用purifyCSS可以大大减少css的冗余 1.安装的命令:安装的w...

webpack学习笔记丁点积累

webpack是什么? https://webpack.js.org/concepts/ https://code.tutsplus.com/tutorials/introduction-to-web...

Webpack学习笔记与填坑记录

起源最近在做一个项目啦,用webpack打包。学习打包工具是一种可以极大减轻前端开发工作量的存在,目前据我接触过的有webpack、百度的fis、当时在腾讯实习时候同事自己开发的mt,个人认为这种工具...

webpack学习笔记1

# 1.新建项目文件夹 mkdir webpack-demo # 2.创建一个package.json文件 使用npm init 初始化 ,name:项目名 其他的直接enter 最后输...

webpack学习笔记一

原文链接:https://segmentfault.com/a/1190000006178770?_ea=1088498 由于使用的是webpack版本是2.2.1,所以针对原文做了一些修改。 针对w...

webpack学习笔记-7-开发环境和生产环境

简要介绍了webpack在开发环境和生产环境的使用
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:webpack学习笔记
举报原因:
原因补充:

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