Coder Social home page Coder Social logo

with-webpack's Introduction

with-webpack

开箱即用的 webpack,并且可以二次自定义配置, 和预制插件。

Install

$ npm i --save with-webpack

Use React (Javascript or Typescript)

Create configs

Make project tree like this:

public |
    --index.html;
src |
    --index.js;
scripts |
    --webpack.config.js;
    --webpack.dll.js;

Edit file:

scripts/webpack.config.js

const { createConfig } = require('with-webpack');
const resolve = require('path').resolve;

module.exports = createConfig({
  entry: {
    main: resolve(__dirname, '../src/index.js'),
    // main: resolve(__dirname, '../src/index.tsx'), if you use typescript
  },
});

scripts/webpack.dll.js

const { createDll } = require('with-webpack');

module.exports = createDll();

public/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name='viewport' content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no'
    />
    <title>React App</title>
    <script src="./dll/dll.js"></script>
    <style>
        html,
        body {
            margin: 0px;
            padding: 0px;
            height: 100%;
        }

        #root {
            display: flex;
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
</body>

</html>

Add package.json

"dll": [
    "react",
    "react-dom",
    // Add any static package, Use `npm run dll` build dll.js
],
"scripts": {
    "web": "webpack-dev-server --config scripts/webpack.config.js",
    "dll": "webpack --progress --config scripts/webpack.dll.js",
    "build": "prod=1 webpack -config scripts/webpack.config.js",
    "test": "jest"
  },

run script

$ npm run dll # build dll.js in public/dll
$ npm run web

Use react-native-web

Create react-native project:

$ react-native init MyProject
$ cd MyProject

Use typescript and react-native-web, you need install:

$ yarn add --dev typescript react-native-typescript-transformer ts-jest @types/react @types/react-native @types/react-dom @types/jest @types/react-test-renderer
$ yarn add with-webpack

Copy default react-native-web-config

$ cp -rf node_modules/with-webpack/react-native-web-config/* ./

Add package.json:

"dll": [
    "react",
    "react-dom",
    "react-art",
    "react-native-web"
],
"scripts": {
    "web": "webpack-dev-server --config scripts/webpack.config.js",
    "dll": "webpack --progress --config scripts/webpack.dll.js",
    "build": "prod=1 webpack -config scripts/webpack.config.js",
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "ios": "react-native run-ios --simulator=\"iPhone X\"",
    "android": "react-native run-android",
    "test": "jest"
  },

Run iOS project:

$ npm run dll
$ npm run ios

with-webpack's People

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.