文档章节

react 入门到放弃 之 webpack

 激进黄瓜酱
发布于 2016/05/24 17:26
字数 1109
阅读 108
收藏 0

自己花了几个月时间自学前端、在百度的帮助下迷糊了几个月 幸好还有谷歌

现在把自己学的东西  知识 整理下  

所以  这个不是大神的教程  是同样小白的学习笔记  

希望自己走过的坑可以帮助其他小白别踩  比我少绕弯路

 

1、开始需要的环境

电脑安装了node会基本的npm安装

node教程指向:http://www.imooc.com/learn/348    慕课网node教程  

node的知识很深  我们只需要了解到node的模块与包管理就可以了 想更深入的可以继续钻研下去 node是可以构建服务端的。

 

2、什么是webpack 作用是什么?

js文件的打包 压缩 混淆  还可以通过插件 处理一些less scss es6转换等等工作

给我们提供整套工作方案 写代码更简便舒心 

可以理解为一个工作台、脚手架

 

3、新建react项目

新建目录 目录名称项目名

/根文件夹

|—app
|    |—components    组件目录 里边存放react组件
|    |—images           图片文件目录
|    |—sass               sass文件目录
|    |—main.js            js入口文件
|
|—build
|    |—index.html       应用入口
|
|—dist                     wegpack打包的生产目录
|
|—package.json 
|—webpack.config.js  开发环境配置文件
|—webpack.production.config.js  生产环境配置文件

 

以后会根据内容的提升新增目录 比如redux、router之类的

 

初始化react环境

npm init

cnpm install react-dom --save

cnpm install react --save

 

 

4、webpack安装与配置

 

贴下package.json 需要安装的列表

—————babel处理了es6语法还有将react编译——————

    "babel-core": "^6.9.0",

    "babel-loader": "^6.2.4",

    "babel-preset-es2015": "^6.3.13",

    "babel-preset-react": "^6.3.13",

    "babel-polyfill": "^6.9.1",

    "babel-preset-stage-0": "^6.5.0",

——————react热插拔———————

    "react-hot-loader": "^1.3.0",

——————基本模块—————

    "webpack": "^1.13.1",

    "react": "^15.1.0",

    "react-dom": "^15.1.0",

——————开启web服务———————

    "webpack-dev-server": "^1.14.1”,

———————处理sass css 图片————————

    "css-loader": "^0.23.1",

    "file-loader": "^0.8.5",

    "style-loader": "^0.13.1",

    "url-loader": "^0.5.7",

    "sass-loader": "^3.2.0",

    "node-sass": "^3.7.0"

 

 

package.json 新增:

 "scripts": {

    "build": "webpack",

    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"

  }

解释:

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

当你运行 npm run dev 的时候,会启动一个 Web 服务器,然后监听文件修改,然后自动重新合并你的代码。真的非常简洁!

 

 

先说下工作 或者开发模式 跟生产模式 有什么不同

其实可以理解为两个webpack的配置文件  文件大部分配置相同

一个是在开发时候开启的  里边配置了工具来帮助开发

一个是开发后打包应用的  所以剔除了开发模式时候提供的工具之类的

这里 webpack.config.js  是默认的配置文件名称  也是开发模式配置文件

webpack.production.config.js  是生产模式配置文件 当然名字可以自己起  在写package.json 命令时候 自己指定名称就行

 

贴下工作模式下 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 pathToReacttow = path.resolve(node_modules, 'react-dom/dist/react-dom.min.js');



var config = {

  entry: [

       /** 文件更新后 浏览器自动刷新*/

      'webpack/hot/dev-server',

      'webpack-dev-server/client?http://localhost:8080',

      /** 打包的入口文件*/

      path.resolve(__dirname, 'app/main.js') 

    ],

    

    // resolve: {

    //     alias: {

    //       'react': pathToReact,

    //       'react-dom': pathToReacttow

    //     }

    // },

    

    /** 打包的出口文件*/

  output: {

    path: path.resolve(__dirname, 'build'),

    filename: 'bundle.js'

  },

  module: {

    loaders: [

          {

                test: /\.jsx?$/,

                loader: 'babel-loader',

                exclude: /node_modules/,

                query: {

                    presets: ['es2015','react']

                }

                

          },

          {

             /** 编译sass文件*/

            test: /\.scss$/,

            loader: 'style!css!sass'

          }, {

            /** 图片如果不大于 25KB 的话要自动转成 BASE64 字符串*/

            test: /\.(png|jpg)$/,

            loader: 'url?limit=25000'

          }

        ]

        // noParse: [pathToReact , pathToReacttow]

  }

};



module.exports = config;

 

 

 

配置生产模式

 

package.json新增

"scripts": {

    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build",

    "deploy": "NODE_ENV=production webpack -p --config webpack.production.config.js"

  },

 

生产模式webpack.production.config.js配置


 

var path = require('path');

var webpack = require('webpack');

var node_modules_dir = path.resolve(__dirname, 'node_modules');



var config = {



    entry: [

        path.resolve(__dirname, 'app/main.js')

    ],



    /** 打包的出口文件*/

    output: {

        publicPath:'./',

        path: path.resolve(__dirname, 'dist'),

        filename: 'bundle.js'

    },

    module: {

        loaders: [

            {

                test: /\.jsx?$/,

                loader: 'babel-loader',

                exclude: [node_modules_dir],

                query: {

                    presets: ['es2015', 'react']

                }

            },

            {

                /** 编译sass文件*/

                test: /\.scss$/,

                loader: 'style!css!sass'

            }, {

                /** 图片如果不大于 25KB 的话要自动转成 BASE64 字符串*/

                /** loader的&name=img/[name].[ext]  指定了图片要放在img文件夹下*/

                test: /\.(png|jpg)$/,

                loader: 'url?limit=25000&name=img/[name].[ext]'

            }

        ]

        // noParse: [pathToReact , pathToReacttow]

    },

    plugins: [

        new webpack.DefinePlugin({

            "process.env": {

                NODE_ENV: JSON.stringify("production")

            }

        })

    ]



};



module.exports = config;

入口js文件添加 : import "babel-polyfill";  //es6 api

npm run dev 开启开发模式  浏览器 访问 http://localhost:8080

npm run deploy 开启生产 打包文件 文件会打包到dist文件夹下

© 著作权归作者所有

粉丝 2
博文 11
码字总数 5088
作品 0
洛阳
私信 提问
学习资料积累

webpack新手入门:http://www.jianshu.com/p/42e11515c10f react 文本编辑器:react-umeditor node版文本编辑器:https://github.com/netpi/ueditor (一)react各种学习资料 1.react服务端渲...

bocat
2016/09/08
6
0
react学习资源汇总

react-tutorial a tutorial react collection and sort,let you easily get started and organized 主要是搜集整理生态从入门到深入的教程、工具和自己做的demo,以便日后查阅 :blush: 设计思...

逆蝶_Snow
2016/12/01
429
0
前端技术周刊 2018-06-22:Webpack 生存指南

前端技术周刊 2018-06-22 新闻 生态更新 Nodejs 发布了六月安全更新,建议开发者更新到 10.4.1 版本,包含对 HTTP/2 拒绝服务攻击、TLS 拒绝服务等的预防。 五月底,欧盟的通用数据保护协议 ...

a独家记忆
2018/07/13
0
0
react-router入门

如果您已经入门reactjs,请绕道~ 这篇博客只适合初学者,初学reactjs的时候,如果你不会webpack,相信很多人都会被官方的例子绕的晕头转向。 ES6的例子也会搞死一批入门者。之前一直用的gulp,...

馒头
2016/03/08
166
0
webpack 入门

1. 什么是webpack 官网介绍:webpack是一个模块打包器。webpack 处理带有依赖关系的模块,生成一系列表示这些模块的静态资源。(webpack is a module bundler.webpack takes modules with dep...

力谱宿云
2016/05/13
2.3K
0

没有更多内容

加载失败,请刷新页面

加载更多

一起来学Java8(三)——方法引用

在一起来学Java8(一)——函数式编程中有一个简单的函数式编程的例子: import java.util.function.Consumer;class Person { public static void sayHello(String name) { S...

猿敲月下码
17分钟前
8
0
读书笔记:深入理解ES6(十一)

第十一章 Promise与异步编程   Promise可以实现其他语言中类似Future和Deferred一样的功能,是另一种异步编程的选择,它既可以像事件和回调函数一样指定稍后执行的代码,也可以明确指示代码...

张森ZS
40分钟前
13
0
面试官,Java8 JVM内存结构变了,永久代到元空间

在文章《JVM之内存结构详解》中我们描述了Java7以前的JVM内存结构,但在Java8和以后版本中JVM的内存结构慢慢发生了变化。作为面试官如果你还不知道,那么面试过程中是不是有些露怯?作为面试...

程序新视界
48分钟前
27
0
Elasticsearch 实战(一) - 简介

官腔 Elasticsearch,分布式,高性能,高可用,可伸缩的搜索和分析系统 基本等于没说,咱们慢慢看 1 概述 百度:我们比如说想找寻任何的信息的时候,就会上百度去搜索一下,比如说找一部自己喜...

JavaEdge
53分钟前
19
0
【jQuery基础学习】11 jQuery性能简单优化

本文转载于:专业的前端网站➦【jQuery基础学习】11 jQuery性能简单优化 关于性能优化 合适的选择器 $("#id")会直接调用底层方法,所以这是最快的。如果这样不能直接找到,也可以用find方法继...

前端老手
今天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部