react-redux-webpack搭建一

2019独角兽企业重金招聘Python工程师标准>>>

项目下载地址https://gitee.com/zhuangy/react-redux

项目结构

package.json文件

{
  "name": "lan",
  "version": "1.0.0",
  "description": "my first",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "test": "webpack-dev-config "
  },
  "repository": {
    "type": "git",
    "url": "git"
  },
  "keywords": [
    "react",
    "redux"
  ],
  "author": "zy",
  "license": "MIT",
  "devDependencies": {
    "axios": "^0.16.2",
    "babel-cli": "^6.16.0",
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.16.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-latest": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-2": "^6.17.0",
    "bundle-loader": "^0.5.5",
    "compression": "^1.6.2",
    "css-loader": "^0.22.0",
    "eslint": "^1.9.0",
    "eslint-config-airbnb": "0.1.0",
    "eslint-plugin-react": "^3.2.3",
    "expect": "^1.12.0",
    "express": "^4.15.2",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.8.4",
    "http-proxy-middleware": "^0.17.4",
    "image-webpack-loader": "^3.1.0",
    "imports-loader": "^0.6.4",
    "isomorphic-fetch": "^2.2.1",
    "jasmine-core": "^2.3.4",
    "jest": "^19.0.2",
    "jest-runtime": "^19.0.2",
    "less": "^2.7.1",
    "less-loader": "^2.2.2",
    "open": "0.0.5",
    "postcss-loader": "^0.7.0",
    "react-test-renderer": "^15.4.2",
    "react-transition-group": "^1.1.1",
    "redux-logger": "^2.8.2",
    "redux-promise": "^0.5.3",
    "redux-thunk": "^2.2.0",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.6",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.6.1"
  },
  "dependencies": {
    "babel-runtime": "^6.23.0",
    "fastclick": "^1.0.6",
    "history": "^4.6.1",
    "prop-types": "^15.5.7-alpha.1",
    "react": "^15.6.0",
    "react-dom": "^15.6.0",
    "react-hot-loader": "^3.0.0-beta.7",
    "react-redux": "^5.0.5",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "react-router-redux": "^4.0.8",
    "redux": "^3.6.0",
    "redux-devtools-extension": "^2.13.0"
  }
}

"scripts": 中 "start": "node server.js"默认启动根目录下的node server.js，如果start为webpack-dev-server也会默认执行根目录下的webpack.config.js

初始生成package.json文件

->     npm init 

语法检测eslint

npm i –-save-dev eslint@^1.9.0

初始化生成.eslintrc文件

node_modules\.bin\eslint --init 

上下键自行进行选择

server.js

var webpack = require('webpack'); // webpack核心
var WebpackDevServer = require('webpack-dev-server'); // webpack提供的服务器插件
var config = require('./webpack.config.js'); // webpack的配置文件

/* 下面是创建一个服务对象，固定写法 */
var server = new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath, // 文件相对引用路径，就用配置文件中配置的即 '/build/'
    hot: true, // 是否启用热更新
    inline: true, // 是否实时刷新，即代码有更改，自动刷新浏览器
   historyApiFallback: true, // 所有的url路径均跳转到index.html,需要设置为true，否则比如访问localhost:8888,就跳转不到/home页
    stats: {   modules: false,
      chunks: false,
      colors: true }, // 不同类型的信息用不同的颜色显示
});

/* 将所有的访问路径，都返回index.html */
server.app.get('*', function(req, res) {
    res.sendFile(__dirname + '/index.html');
});
/* 启动服务 */
server.listen(8888, function() {
    console.log('启动服务：8888端口');
});

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var argv = require('yargs').argv;

var plugins = [
    new ExtractTextPlugin('styles.css'),
    // new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks: function (module) {
            // 该配置假定你引入的 vendor 存在于 node_modules 目录中
            return module.context && module.context.indexOf('node_modules') !== -1;
        }
    })
]
var app = ['./entry']
    app.unshift('react-hot-loader/patch','webpack-dev-server/client?http://localhost:8888',
     'webpack/hot/only-dev-server')
    plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
  )
module.exports = {
    context: path.resolve(__dirname, 'src'),
    devtool:  'inline-source-map',
    entry: {
        app: app
    },
    output: {
        filename: '[name].js',
        path: path.join(__dirname, 'build'),
        publicPath: '/build/',
        chunkFilename: '[name].js'
    },
    // BASE_URL是全局的api接口访问地址
    plugins,
    // alias是配置全局的路径入口名称，只要涉及到下面配置的文件路径，可以直接用定义的单个字母表示整个路径
    resolve: {
        extensions: ['.js', '.jsx', '.less', '.scss', '.css'],
        modules: [
            path.resolve(__dirname, 'node_modules'),
            path.join(__dirname, './src')
        ],
        alias: {

        }
    },

    module: {
        rules: [{
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader?cacheDirectory=true'
            }
        }, {
            test: /\.(less|css)$/,
            use: ExtractTextPlugin.extract({
                use: ["css-loader", "less-loader", "postcss-loader"]
            })
        }, {
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            use: ['url-loader?limit=1000&name=files/[md5:hash:base64:10].[ext]']
        }]
    }
};

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
  <link rel="stylesheet" href="./build/styles.css">
  <title>My First Project</title>
</head>
<body>
  <div id="root"></div>
</body>
<script src="./build/vendor.js"></script>
<script src="./build/app.js"></script>
</html>

 

转载于:https://my.oschina.net/u/3647713/blog/1507199