kraken.js+react+redux+webpack实践

最新推荐文章于 2024-05-10 09:48:25 发布

默翁

最新推荐文章于 2024-05-10 09:48:25 发布

阅读量762

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/qq_17472727/article/details/53840923

版权

学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一.创建kraken 项目

kraken.js 由paypal 公司开源的一个用于快速开发基于Express.js框架应用的快速开发工具, 因为kraken 并没有在Express.js基础上更改多少东西,只是在原来的express基础上补充了一些约定开发的规则, 让开发根据便捷.

注：（kraken.js在express基础上补充了什么，两者之间的区别具体有哪些，这些还有待深入去了解下）

1.安装必备工具

执行命令：sudo npm install -g generator-kraken

2.创建kraken项目

执行命令： yo kraken

然后,看着提示语,输入一些东西,一个项目就这样创建完毕.

3.运行项目

cd slacker

npm start

如下图所示：

在浏览器访问http:localhost:8000

二.搭建webpack+react

1.配置webpack

（1）webpack.config.js（开发环境）

var path = require('path')
var webpack = require('webpack')


module.exports = {
  entry: {
    index:    ['webpack-hot-middleware/client', './src/modules/app/index.js'],
  },
  output: {
    path: path.join(__dirname, 'public'),
    filename: '[name].js',
    publicPath: '/statics/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: [ 'react-hot', 'babel?' + JSON.stringify({presets: ['react', 'es2015','stage-0']})],
        exclude: /node_modules/,
        include: __dirname
      },
      {
        test: /\.json$/,
        loaders: [ 'json'],
        exclude: /node_modules/,
        include: __dirname
      },
      {
        test: /\.css?$/,
        loaders: ["style", "css"],
        include: path.resolve(__dirname, "style")
      },
      {
        test: /\.css?$/,
        loaders: ["style", "css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]"],
        include: path.resolve(__dirname, "src"),
      },
      {
        test: /\.less$/,
        loaders: ["style", "css", "less"],
        include: path.resolve(__dirname, "style")
      },
      {
        test: /\.less$/,
        loaders: ["style", "css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]", "less"],
        include: path.resolve(__dirname, "src"),
      }
    ]
  }
}

（2）webpack.prod.config.js（生产环境）

var path = require('path')
var webpack = require('webpack')

var HtmlWebpackPlugin = require('html-webpack-plugin');
var randomCode = (new Date()).getTime();


var definePlugin = new webpack.DefinePlugin({
  "process.env": { 
     NODE_ENV: JSON.stringify("deveploment")
   }
})

module.exports = {
  devtool: false,
  entry: {
    index: ['./src/modules/app/index.js'],
  },
  output: {
    path: path.join(__dirname, 'public/statics'),
    filename: '[name].js',
    publicPath: '/statics/',
    libraryTarget: "umd"
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: '../../modules/app/views/layout/master.html',
      template: 'modules/app/views/layout/master-template.html',
      body: '<%- body %>',
      code: randomCode,
      hash: true
    }),

  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: [ 'react-hot', 'babel?' + JSON.stringify({presets: ['react', 'es2015','stage-0']})],
        exclude: /node_modules/,
        include: __dirname
      },
      {
        test: /\.json$/,
        loaders: [ 'json'],
        exclude: /node_modules/,
        include: __dirname
      },
      {
        test: /\.css?$/,
        loaders: ["style", "css"],
        include: path.resolve(__dirname, "style")
      },
      {
        test: /\.css?$/,
        loaders: ["style", "css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]"],
        include: path.resolve(__dirname, "src"),
      },
      {
        test: /\.less$/,
        loaders: ["style", "css", "less"],
        include: path.resolve(__dirname, "style")
      },
      {
        test: /\.less$/,
        loaders: ["style", "css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]", "less"],
        include: path.resolve(__dirname, "src"),
      }
    ]
  }
}