zoukankan      html  css  js  c++  java
  • 【webpack4.0】---dev.config.js基本配置(六)

    一、开发环境配置准备

    1、创建dev.config.js文件

    用来配置开发环境的代码

    2、安装webpack-merge

    cnpm install webpack-merge -D

    用来合并webpack配置项

    二、开发环境基础配置代码

    //合并webpack配置项
    constwebpackMerge=require("webpack-merge");
    //path模块
    constpath=require("path");
    //基础配置项
    constbaseConfig=require("./base.config");
    constwebpack=require("webpack");

    constwebpackConfig=webpackMerge(baseConfig,{
       mode:"development",
       devtool: 'inline-source-map',
    })

    module.exports=webpackConfig

    三、loader处理css

    1、安装

    cnpm  install  style-loader  css-loader sass-loader  node-sass   postcss-loader    -D

    2、基本使用

    constwebpackConfig=webpackMerge(baseConfig,{
       mode:"development",
       devtool: 'inline-source-map',
       module:{
           rules:[
              {
                   test:/.(css|scss)$/,
                   use:[
                      {loader:"style-loader"},// 将 JS 字符串生成为 style 节点
                      {loader:"css-loader"},// 将 CSS 转化成 CommonJS 模块
                      {
                           loader:"postcss-loader",
                           options:{
                               sourceMap: true,
                               config:{
                                   path:"./postcss.config.js"// 在项目根目录创建此文件
                              }
                          }
                      },
                      {
                           loader:"sass-loader"// 将 Sass 编译成 CSS
                      }
                  ]
              }
          ]
      }
    })

    3、根目录下创建postcss.config.js

    module.exports={
       plugins: [
           require('autoprefixer')({
               overrideBrowserslist: [
                   "Android 4.1",
                   "iOS 7.1",
                   "Chrome > 31",
                   "ff > 31",
                   "ie >= 8"
              ],
               grid: true  
          })
      ]
    };

    四、开启热更新

    HotModuleReplacementPlugin是webpack自带的方法

    plugins:[
           newwebpack.HotModuleReplacementPlugin()//热更新
      ]

    五、webpack-dev-server

    1、安装

    cnpminstallwebpack-dev-server-D

    2、基本使用

    devServer:{
           contentBase:path.join(__dirname,"../dist"),
           port:"9000",
           historyApiFallback: true,//不跳转
           noInfo: true,
           inline: true,//实时刷新
           disableHostCheck: true,
    }
  • 相关阅读:
    14_java之变量|参数|返回值|修饰符
    NYOJ 202 红黑树 (二叉树)
    NYOJ 138 找球号(二) (哈希)
    NYOJ 136 等式 (哈希)
    NYOJ 133 子序列 (离散化)
    NYOJ 129 树的判定 (并查集)
    NYOJ 117 求逆序数 (树状数组)
    NYOJ 93 汉诺塔 (数学)
    HDU 2050 折线分割平面 (数学)
    天梯赛L2-008 最长对称子串 (字符串处理)
  • 原文地址:https://www.cnblogs.com/yebai/p/11348430.html
Copyright © 2011-2022 走看看