zoukankan      html  css  js  c++  java
  • 懒人配置webpack

    npm install npm@latest -g 
    
    mkdir webpack-demo && cd webpack-demo
    npm init -y
    npm install webpack webpack-cli --save-dev
    
    npm install --save-dev babel-loader babel-core babel-preset-env
    
    npm install sass-loader node-sass --save-dev
    npm install style-loader css-loader --save-dev
    
    npx webpack --config webpack.config.js
    
    npm install webpack-dev-server --save-dev
    
    //config some code in package.json file 
    "scripts": {
      "start:dev": "webpack-dev-server"
    }
    
    and in the shell to run 
    npm run start:dev
    
    //config hot update 
    https://webpack.js.org/guides/hot-module-replacement/
    
    --------------
    webpack.config.js file conofigure
    /* === dont forget to import scss to main.js file === */
    /* ===> import './main.scss'; <=== */
    
    var path = require("path");
    
    module.exports = {
      entry: "./main.js",
      output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
        publicPath: "/dist"
      },
      module: {
        rules: [
          {
            test: /.js$/,
            use: {
              loader: "babel-loader",
              options: { presets: ["es2015"] }
            }
          },
          {
            test: /.scss$/,
            use: [
              {
                loader: "style-loader" // creates style nodes from JS strings
              },
              {
                loader: "css-loader" // translates CSS into CommonJS
              },
              {
                loader: "sass-loader" // compiles Sass to CSS
              }
            ]
          }
        ]
      }
    };
    

    hot module replacement:

  • 相关阅读:
    springmvcdemo
    src/main/resorces applicationContext.xml
    maven 中setting.xml
    Git
    刘相兵 AWR
    Oracle 查询SQL 执行次数---hash value
    Oracle 查询重复索引列
    Oracle 史上最全近百条Oracle DBA日常维护SQL脚本指令
    Oracle 查询表对应的索引
    11g RAC 自动升级 PSU
  • 原文地址:https://www.cnblogs.com/cyany/p/9105254.html
Copyright © 2011-2022 走看看