资讯专栏INFORMATION COLUMN

webpack+react项目初体验——记录我的webpack环境配置

csRyan / 2023人阅读

摘要:安装写在里安装和配置和之前一样用来处理文件相关的这个包括的就比较多,有,后面两个是为了写和服务。

这两天学习了一些webpack的知识,loaders+plugins真的很强大!不过配置起来也很复杂,看了一些文章,自己也写了项目练手,写下来加深自己的印象。

首先,非常非常推荐的几篇文章,初学者一定要看!
<入门Webpack,看这篇就够了>
http://www.jianshu.com/p/42e1...
(标题一点也不夸张,非常适合0基础)

https://zhuanlan.zhihu.com/p/...
https://zhuanlan.zhihu.com/p/...
https://zhuanlan.zhihu.com/p/...
(这个系列有三篇文章,第三章是一个webpack+react的小项目,跟着做一遍会很有收获~)

另外,也推荐看一下阮一峰es6书中module这一章,弄清楚export/import/export default等等命令,毕竟webpack的各个模块是靠export/import/require(commonjs)链接起来的,所以这些都要掌握。

具体到项目的话,webpack有几个比较基本的概念:
1、loaders:通过不同的loaders,webpack可以处理各式各样的文件,然后打包到一个文件中(比如bundle.js);
2、plugins:plugins是为了拓展webpack的功能的,和loaders不同的是,loader是用来处理单个文件的(比如json-loader处理.json,sass-loader处理.scss),但是plugins是直接对整个构建过程进行处理(比如自动生成html文件的html-webpack-plugin);
3、others: 这些我也不知道要归到哪里去,但是在配置中也是必不可少,包括webpack-dev-server/source-map等等,后面会具体说;
4、配置文件:我这个小项目包括的文件有.babelrc(用来处理babel),webpack.config.js(webpack项目基础配置文件),package.json(这个文件会记录所有的devDependencies)。

然后我们就一项一项来分析吧:

1、loaders
1) style-loader / css-loader / sass-loader

这几个loader用来处理.css和.scss文件,一起安装用空格隔开:

 $ npm install --save-dev style-loader css-loader sass-loader

同时修改webpack.config.js:

module: {
        loaders: [
        {
            test: /.scss$/,
            //loaders是依靠正则表达式来测试这个文件是不是这个loader来处理,所以test不能少
            loaders: ["style-loader","css-loader","sass-loader"],
            //"-loader"一定要写,不然会报错
            //loaders的处理顺序是从右向左,就是会先用sass-loader,其次css-loader,再次style-loader
        }  
        
2) url-loader

这个loader是用来处理url链接,就是图片或者其他静态文件。
安装:

$ npm install --save-dev url-loader

webpack.config.js (写在module里):

    {
            test: /.(png|jpq)$/,
            loader: "url? limit = 40000"
        }
3) json-loader

安装和配置和之前一样~用来处理json文件

4) babel相关的loaders:

这个包括的就比较多,有babel-core/babel-loader/babel-preset-es2015/babel-preset-react,后面两个是为了写es6和react服务。

    //webpack.config.js
        {
            test: /.jsx$/,
            loader:"babel-loader",
            include: APP_PATH,
            //这个include是说只对这里面的文件负责,还有一个对应的exclude,就是忽略范围内的文件, 比如:exclude: "./node_modules/";
        }

另外因为babel需要写的选项比较多,可以配一个.babelrc在根目录下:

//.babelrc
{
    "presets":["react","es2015"],
    }
}

以上就是用的比较多的loaders,配完这些webpack就可以处理json/sass/es6啦~

2、plugins
1) html-webpack-plugin

这个插件的作用就是自动生成html(其实也可以自己写,就是加了个bundle.js的script而已,不过感觉比较酷):
plugins安装好了之后要放在webpack.config.js的plugins的数组里,不要写在modules里呀~

    //webpack.config.js
    plugins: [
        new HtmlWebpackPlugin({
        //在最前面先定义下HtmlWebpackPlugin--
        //var HtmlWebpackPlugin = require("html-webpack-plugin");
            title: "searchBar",    //配合html-webpack-plugin的配置
        })
    ],
2) react-transform-hrm

HMR是一个webpack插件,它让你能浏览器中实时观察模块修改后的效果,但是如果你想让它工作,需要对模块进行额外的配额;
Babel有一个叫做react-transform-hrm的插件,可以在不对React模块进行额外的配置的前提下让HMR正常工作;
安装:

$ npm install --save-dev babel-plugin-react-transform react-transform-hmr

配置:

//webpack.config.js (plugins里)
new webpack.HotModuleReplacementPlugin();

然后修改下.babelrc:

{
  "presets": ["react", "es2015"],
  "env": {
    "development": {
    "plugins": [["react-transform", {
       "transforms": [{
         "transform": "react-transform-hmr",

         "imports": ["react"],

         "locals": ["module"]
       }]
     }]]
    }
  }
}

这样在使用react的时候就可以热加载模块了~

3)UglifyJsPlugin:

压缩JS代码;

4)ExtractTextPlugin:

分离CSS和JS文件;
以上两个插件这次没有用,先记下来下次用过了再来补~

3、others
1) webpack-dev-server

用来构建本地开发的服务器,可以让浏览器监测代码的修改,并自动刷新修改后的结果;
安装:

$npm --save-dev webpack-dev-server

webpack-dev-server有以下几个配置选项:

contentBase:默认webpack-dev-server会为根文件夹提供本地服务器,如果想为另外一个目录下的文件提供本地服务器,应该在这里设置其所在目录(本例设置到“public"目录)

port:设置默认监听端口,如果省略,默认为”8080“

inline:设置为true,当源文件改变时会自动刷新页面

historyApiFallback:在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html

//webpack.config.js
devServer: {
           contentBase: "./public",//本地服务器所加载的页面所在的目录
           historyApiFallback: true,//不跳转
           inline: true//实时刷新
       }

//package.json
 "scripts": {
    "start": "webpack-dev-server --inline",
  }

然后就可以用http://localhost:8080/index.html预览项目啦~

2)source-map:

source maps提供了一种对应编译文件和源文件的方法,使得编译后的代码可读性更高,也更容易调试。
在学习阶段和写中、小型项目的时候,用eval-source-map,如果是开发大型项目可以用cheap-module-eval-source-map,会更快。

//webpack.config.js
devtool: "eval-source-map",
3) 第三方库:

这个就包括一些我们比较了解的比如react/react-dom/jquery/moment/bootstrap等等啦,配置起来也很方便,首先是安装:

$npm --save-dev jquery moment react react-dom
$npm install bootstrap@4.0.0-alpha.2 --save-dev

然后在你需要的js文件里引用这些库:

import React from "react";
import ReactDOM from "react-dom";

var $ = require("jquery");
var moment = require("moment");

然后就可以愉快地写各种js、jsx文件啦~

4、配置文件

最后我们来讲一讲几个配置文件的问题:

1) webpack.config.js

上面提到的都是各种肢解,我这次的config文件是这样的:

var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, "app");
var BUILD_PATH = path.resolve(ROOT_PATH, "build");

module.exports = {
    devtool: "eval-source-map",
    entry: __dirname + "/app/index.jsx",
//webpack的入口文件只有一个,所以写的所有components甚至包括css/json什么的,都要引用在这里
output:{
    path: __dirname +"/public",
    filename: "bundle.js",
},
//我这边是新建了一个folder叫public,用来放index.html和bundle.js
devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
},
plugins: [
    new HtmlWebpackPlugin({
        title: "searchBar",    //配合html-webpack-plugin的配置
    })
],
module: {
    loaders: [
    {
        test: /.scss$/,
        loaders: ["style-loader","css-loader","sass-loader"],
    },{
        test: /.(png|jpq)$/,
        loader: "url? limit = 40000"
    },{
        test: /.jsx$/,
        loader:"babel-loader",
        include: APP_PATH,
    }]
},
resolve:{
        extensions: ["",".js", ".jsx"]
    },
};
2) package.json

这个文件会在你最开始npm init的时候就生成,一路回车就可以,后来都可以改~

{
  "name": "serach-bar",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --progress --profile --colors --hot",
    "build": "webpack --progress --profile --colors",
    "test": "karma start"
  },
 //scripts这边可以改一下,改start可以,在终端用npm start,上面有例子~这边的dev要改的话在终端的命令是"npm run dev;
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babel-preset-react-hmre": "^1.1.1",
    "bootstrap": "^4.0.0-alpha.2",
    "css-loader": "^0.26.1",
    "file-loader": "^0.10.0",
    "html-webpack-plugin": "^2.28.0",
    "jquery": "^3.1.1",
    "jshint": "^2.9.4",
    "jshint-loader": "^0.8.3",
    "json-loader": "^0.5.4",
    "node-sass": "^4.5.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-transform-catch-errors": "^1.0.2",
    "react-transform-hmr": "^1.0.4",
    "redbox-react": "^1.3.3",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0"
  }
}

装了很多dev,其实用不着那么多哈哈~

3) .babelrc
{
    "presets":["react","es2015"],
    "env":{
    "development":{
    "presets":["react-hmre"]
    }
    }
}

ok,这样就差不多啦~另外还要注意的是index.jsx/index.js,所有的components都要引用过来,css/scss也是,css文件的话最好有一个main.css进行整合,这样不会漏掉。
看一眼这次的index.jsx:

// "注意这些import
import "../node_modules/bootstrap/scss/bootstrap.scss";
import "./main.scss";
import React from "react";
import ReactDOM from "react-dom";
import Search from "./components/search";
import Plist from "./components/plist";

class App extends React.Component{
    constructor(props){
        super(props);
        this.state={"keyword":""};
        this.refreshKeyword = this.refreshKeyword.bind(this);
    }
    refreshKeyword(name){
        this.setState({"keyword":name});
    }
    render(){
        return (
            

Search Github Users

) } }; const app = document.createElement("div"); document.body.appendChild(app); ReactDOM.render(, app);

恩,差不多就是这样啦~~项目初始化的时候不要忘记npm install --save-dev webpack哦!coding愉快!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/81403.html

相关文章

  • webpack4.0体验、各版本及parcel性能对比

    摘要:前段时间又发布了新版本我接触的时候已经版本了支持的版本必须打包速度大小比较以及粗浅的试了一下下图所示,黄色为版本绿色为我写的配置,跟基本相似,具体不同下面会介绍蓝色是自带的模式红色为具体大小速度大家可以比较一下,还是很给力的关于配置方面,应 前段时间webpack又发布了新版本webpack4我接触的时候已经4.1版本了node支持的版本必须node: >=6.11.5 webpack...

    MarvinZhang 评论0 收藏0
  • webpack打包体验

    摘要:确保在和环境下,如果没有,先安装环境。我的新建一个文件夹,在命令行里进入执行此时,文件夹下多了一个文件。本文仅献给初学的同学,功能强大,想要学好仍需多多学习。 1、确保在node和npm环境下,如果没有,先安装node环境。我的node: showImg(https://segmentfault.com/img/bVbu1T2); 2、新建一个文件夹web,在命令行里进入web,执行 ...

    canopus4u 评论0 收藏0
  • React结合TypeScript和Mobx体验

    摘要:结合编辑器可以推导变量对应的类型以及内部的结构,提高代码的健壮性和可维护性。通过充分利用时间回溯的特征,可以增强业务的可预测性与错误定位能力。对于对象的哪部分需要成为可观察的,提供了细粒度的控制。 showImg(https://segmentfault.com/img/bVba6Ts?w=1218&h=525); 为什么要使用TypeScript 侦测错误 通过静态类型检测可以尽早检...

    dreambei 评论0 收藏0
  • npm + webpack + es6 体验

    摘要:当然,我们需要先下载配置下载和配置下载下载的加载器下载完了,要去进行配置,配置完的文件如下可以看到,和之前的相比,增加了一个的配置。 准备 下载Node.js和npm 一个命令行工具(我的是git bash)。不是必须的,用自带的命令行也可以。 创建一个文件夹,作为根目录,比如 npm-webpack-es6 这时,你将看到一个空文件夹 开始 命令行打开至根目录 键入 npm i...

    seasonley 评论0 收藏0
  • 手把手教你从零搭建react局部热加载环境

    摘要:有没有办法实现就局部刷新呢当然是有第十步执行为了实现局部热加载,我们需要添加插件。 前言 用了3个多月的vue自认为已经是一名合格的vue框架api搬运工,对于vue的api使用到达了一定瓶颈,无奈水平有限,每每深入底层观赏源码时候都迷失了自己。 遂决定再找个框架学习学习看看能否突破思维局限,加上本人早已对React、RN技术垂涎已久,于是决定找找教程来学习。无奈第一步就卡在了环境搭...

    quietin 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<