电商_后台管理[4]

可以完美运行的demo

安装 Node.js

nvm install 6.12.3
nvm use 6.12.3
nvm alias default 6.12.3

安装 Yarn@1.21.1（官网默认版本）

npm install yarn -g

安装 webpack

中文文档
yarn add webpack@3.10.0 --dev

配置 webpack

webpack.config.js

const path = require('path')
module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  }
}

src/app.js

console.log('hello')

node_modules/.bin/webpack

处理 html

const HtmlWebpackPlugin = require('html-webpack-plugin')
// ...
plugins: [new HtmlWebpackPlugin()]

yarn add html-webpack-plugin@2.30.1 --dev
node_modules/.bin/webpack

打包指定的 html

  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="Mark">
  <title>HAPPYMMALL ADMIN</title>
</head>
<body>
  <div id="app">test</div>
</body>
</html>

node_modules/.bin/webpack

处理 js

yarn add babel-loader@7.1.2 babel-core@6.26.0 babel-preset-env@1.6.1 --dev
webpack.config.js

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  }

src/app.js

let a = 123
let test = (value) => {
  return value * 2
}
test(a)

node_modules/.bin/webpack

处理 react

yarn add babel-preset-react@6.24.1 --dev
webpack.config.js

presets: ['env', 'react']

安装 react

yarn add react@16.2.0 react-dom@16.2.0
src/app.js

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

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('app')
);

node_modules/.bin/webpack
浏览器打开 dist/index.html

处理 css

yarn add style-loader@0.19.1 css-loader@0.28.8 --dev
webpack.config.js

      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }

src/index.css

#app {
  color: red;
}

src/app.js

import './index.css'

node_modules/.bin/webpack

css 独立打包

npm install --save-dev mini-css-extract-plugin
webpack.config.js

const path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin');
var { CleanWebpackPlugin } = require('clean-webpack-plugin')
+var MiniCssExtractPlugin = require("mini-css-extract-plugin")
var webpack = require('webpack')

module.exports = {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  entry: {
    main: './src/index.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [{ 
      test: /\.js$/, 
      exclude: /node_modules/, 
      loader: 'babel-loader'
    },{
      test: /\.(png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'images/',
          limit: 2048
        }
      }
    },{
      test: /\.css$/,
      use: [
        'style-loader',
+        {
+          loader: MiniCssExtractPlugin.loader
+        },
        "css-loader",
        'postcss-loader'
      ]
    },{
      test: /\.scss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader', 
          options: {
            importLoaders: 2
          }
        },
        'sass-loader',
        'postcss-loader'
      ]
    },{
      test: /\.(eot|ttf|svg|woff)$/,
      use: {
        loader: 'file-loader',
      }
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }), 
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(),
+    new MiniCssExtractPlugin({
+      filename: "index.css"
+    })
  ],
  devServer: {
    contentBase: './dist',
    open: true,
    port: 8080,
    hot: true,
    hotOnly: true
  }
}

node_modules/.bin/webpack

处理 sass

yarn add sass-loader --dev

webpack.config.js

{
      test: /\.scss$/,
      use: [
        'style-loader',
+        {
+          loader: MiniCssExtractPlugin.loader
+        },
        {
          loader: 'css-loader', 
          options: {
            importLoaders: 2
          }
        },
        'sass-loader',
        'postcss-loader'
      ]
    }

src/index.scss

body {
  background: #ccc;
  #app {
    font-size: 100px;
  }
}

src/app.js

import './index.scss'

yarn add node-sass --dev
node_modules/.bin/webpack

处理 font-awesome

'npm install font-awesome'
app.js

import 'font-awesome/css/font-awesome.min.css'
<i className='fa fa-address-booke'></I>

提出公共模块

代码提交

代码提交

git st
git diff
git dt
git co -b admin-v2
git b
git add .
git ca "初始化"
git push
git push --set-upstream origin admin-v2

电商_后台管理[4]

友情链接更多精彩内容