webpack+react+node采坑之旅（上）

最新推荐文章于 2024-05-07 03:35:08 发布

JSShou

最新推荐文章于 2024-05-07 03:35:08 发布

阅读量891

点赞数

分类专栏：前端开发文章标签：前端 react webpack

本文链接：https://blog.csdn.net/qq_32518231/article/details/78512244

版权

前端开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言

之前一直以为能力已经够了，想出去找份前端的工作，后来才发现还是自己太差，面试官随便一个问题就能把我问哑，比如，webpack、gulp、grunt这些工具了解多少。这两天学习webpack，踩了不少坑，也学到不少东西，记录下来以便后查。

说明

本博客记录于2017.11.12，使用到的各个版本如下
- webpack：3.8.1
- node：v6.11.3
- react：^16.1.0

什么是webpack

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

开始

安装与准备

下载node，里面会集成npm，用npm下载webpack包。

npm install webpack -g

-g 表示全局安装

新建一个文件夹作为项目文件夹，在项目文件夹下shitf+鼠标右键打开命令行，在命令行输入

npm init

提示全部跳过
提示跳过
这时文件夹里会生成一个package.json文件，这个文件的作用是配置项目依赖的包，别人下载了你的项目，只需要npm install就可以直接下载项目依赖的包。

  + blog
   + client
      + dist // 编译并打包后的文件
        + images
        + js
        + css
        + index.html // 前端入口文件
      + src
         + assets // 图片等静态资源
         + components // 一些公用组件            
         + layouts // 一些布局组件（括jsx和sass文件），比如导航栏、侧边栏等等  
         + routes // 路由相关文件
            + routes.js    
         + main.js // 整个前端项目的入口文件
   + server // 服务端文件
   + package.json

接下来安装相应的包。

npm install react react-dom redux react-redux react-router antd css-loader style-loader node-sass sass-loader file-loader url-loader autoprefixer postcss-loader  --save-dev

npm install extract-text-webpack-plugin path --save-dev

安装babel插件

npm install babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-1 babel-plugin-import babel-cli --save-dev

关于–save-dev与–save的区别是–save 会把依赖包名称添加到package.json 文件 dependencies 键下，–save-dev 则添加到 package.json 文件 devDependencies 键下，dependencies是运行时依赖，devDependencies是开发时的依赖。

配置文件

index.html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>hello world</title>
    <link rel="stylesheet" href="">

</head>
<body>
    <div id="app">a</div>
</body>
<script src="vendor.bundle.js" type="text/javascript"></script>
<script src="bundle.js" type="text/javascript" charset="utf-8"></script>
</html>

在项目根文件目录下新建webpack.config.js,配置大致如下

var webpack = require('webpack'),
    ExtractTextPlugin = require('extract-text-webpack-plugin'),
    path=require('path');
var config = {
    entry: { // 打包入口
        index: "./client/src/main.js",
        vendor: [  // 将react和react-dom这些单独打包出来，减小打包文件体积
            "react",
            "react-dom"
        ]
    },
    output:{//打包后的文件
        path: path.resolve(__dirname,'./client/dist'),
        filename: 'bundle.js'
        //filename: '[name].js'
    },    
    module: {//打包文件的配置
        loaders: [{    //将es6语法的js，jsx转为es5js
            test: /\.js|.jsx$/,
            exclude: /node_modules/,
            loader: "babel-loader",   
            query:{
                presets:['es2015','react']
            }         
        }, 
        {
        test: /\.css$/,
        loader: 'style-loader!css-loader!autoprefixer-loader?{browsers:["last 2 version","firefox 15"]}'
        },
        {
            test: /\.(png|jpg|jpng|eot|ttf)$/, // 打包图片和字体文件
            loader: 'url-loader?limit=8192&name=images/[name].[ext]'
        }]
    },
    plugins: [//配置插件
        new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js' }), //这是之前单独打包出来的react、react-dom等文件
        new ExtractTextPlugin("css/index.css"), // 将所有sass/css文件打包成一个index.css文件
        new webpack.DefinePlugin({
            "process.env": { 
                NODE_ENV: JSON.stringify("production") 
            }
        }),
        new webpack.optimize.UglifyJsPlugin({ // 压缩打包后的代码
            compress: {
                warnings: false
            }
        }),       
    ]
}
module.exports = config;

测试

在mian.js写入以下代码

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

ReactDOM.render(
<div>hello,word</div>,
document.getElementById('app')
    )

打开client/dist/index.html
打开index

错误及解决

错误1

ERROR in ./client/src/main.js
Module build failed: SyntaxError: E:/node.js/react/1106ABegin/myTest/client/src/main.js: Unexpected token (5:0)

  3 |
  4 | ReactDOM.render(
> 5 | <div>hello,word</div>,
    | ^
  6 | document.getElementById('app')
  7 |   )
  8 |

解决：原因是jsx配置错误，在webpack.config.js中的module模块修改如下

loaders: [{    // babel loader
            test: /\.js|.jsx$/,
            exclude: /node_modules/,
            loader: "babel-loader",   //使用babel-loader需要下载相应模块
            query:{
                presets:['es2015','react']//这里很重要
            }         
        }

错误2

Uncaught ReferenceError: webpackJsonp is not defined
    at bundle.js:1
(anonymous) @ bundle.js:1

解决：这里是忘了引用依赖的包，我们在webpack.config.js中把react，react-dom打包成了vendor.bundle.js,所以我们需要在index.html中引入相应的包

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>hello world</title>
    <link rel="stylesheet" href="">

</head>
<body>
    <div id="app">a</div>
</body>
<script src="vendor.bundle.js" type="text/javascript"></script>
<script src="bundle.js" type="text/javascript" charset="utf-8"></script>
</html>

错误3

解决：找了很久的错误，发现是在index.html中的引用js的时候必须把它放到文档末尾。

JSShou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack+react+node采坑之旅（上）

前言之前一直以为能力已经够了，想出去找份前端的工作，后来才发现还是自己太差，面试官随便一个问题就能把我问哑，比如，webpack、gulp、grunt这些工具了解多少。这两天学习webpack，踩了不少坑，也学到不少东西，记录下来以便后查。说明本博客记录于2017.11.12，使用到的各个版本如下 - webpack：3.8.1 - node：v6.11.3 - react：^16.1.
复制链接

扫一扫