a typeScript + react + webpack project

npm run dev

npm run build

仅说明module和plugins中的选项

{
    test: /\.scss$/,

    // 此处需要注意：loader 的顺序是从右向左执行，
    // 即：先 sass-loader 把 scss 编译成 css，再由 css-loader 编译成 css 文件，最后由 style-loader 把 css 插入到 html 中
    use: ['style-loader', 'css-loader', 'sass-loader',
    {
      loader: 'sass-resources-loader', //此处为了公共的sass样式能够全局加载，而不用每个组件都单独引用。
      options: {
        resources: projectRootUrl + '/src/assets/scss/style.scss'
      }
    }
  ]
}

CleanWebpackPlugin 清理文件夹

HtmlWebpackPlugin 热更新

ProvidePlugin...

OccurrenceOrderPlugin模块排序，可减少文件大小

--no-inlinevs--inline// 默认开启inline模式，可以通过--no-inline关闭默认

--devtool eval-source-map// 调试模块使用

--hot// 热加载 ps: 据说配置这个后，仍然需要在plugins中配置webpack.HotModuleReplacementPlugin

--colors// 表示给显示出来的进度加点颜色

--content-base// 表示设置目录

--quiet// 控制台中不输出打包的信息

--compress// 开启gzip压缩

--progress// 显示打包的进度