《Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程》 和 《零基础学习 Vue3 教程 2021 年最新教程 免费视频教程》 正在更新

世界上最伟大的投资就是投资自己的教育

剧场模式
首页前端Webpack轻松学 Webpack 4 免费视频教程

轻松学 Webpack 4 免费视频教程 #25 用 mini-css-extract-plugin 把 CSS 分离成文件

随风 · 元婴发布于12766 次点击
1

https://github.com/webpack-contrib/mini-css-extract-plugin

https://github.com/webpack-contrib/extract-text-webpack-plugin

https://github.com/peerigon/extract-loader

https://github.com/kentcdodds/cross-env

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
  // entry: "./src/index.js",
  entry: {
    // app: ["@babel/polyfill", './src/index.js'],
    app: './src/index.js',
    hello: './src/hello.js'
  },
  devtool: false,
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "[name]-[hash].bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          // options: {
          //   presets: [['@babel/preset-env', { "debug": true }]],
          //   plugins: [["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }]]
          // }
          // options: {
          //   plugins: [require('@babel/plugin-transform-arrow-functions')]
          // }
        }
      },
      {
        test: /\.css$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /\.(scss|sass)$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader, // creates style nodes from JS strings
          "css-loader", // translates CSS into CommonJS
          "sass-loader" // compiles Sass to CSS, using Node Sass by default
        ]
      },
      {
        test: /\.less$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader, // creates style nodes from JS strings
          'css-loader', // translates CSS into CommonJS
          'less-loader' // compiles Less to CSS
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Admin',
      filename: 'admin.html',
      template: 'public/index.html',
      chunks: ["hello"]
    }),
    new HtmlWebpackPlugin({
      title: 'Index',
      filename: 'index.html',
      template: 'public/index.html',
      chunks: ["app"]
    }),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: devMode ? '[name].css' : '[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
    })
  ],
  mode: 'development'
}

package.json

{
  "name": "hello-webpack-4",
  "version": "1.0.0",
  "description": "轻松学 Webpack 4",
  "main": "index.js",
  "scripts": {
    "dev": "npx webpack",
    "prod": "NODE_ENV=production npx webpack"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/hfpp2012/hello-webpack-4.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/hfpp2012/hello-webpack-4/issues"
  },
  "homepage": "https://github.com/hfpp2012/hello-webpack-4#readme",
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-decorators": "^7.1.2",
    "@babel/plugin-transform-arrow-functions": "^7.0.0",
    "@babel/plugin-transform-classes": "^7.1.0",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    "css-loader": "^1.0.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "^0.4.4",
    "node-sass": "^4.10.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
  },
  "dependencies": {
    "@babel/polyfill": "^7.0.0",
    "@babel/runtime": "^7.1.2",
    "@babel/runtime-corejs2": "^7.1.2",
    "react": "^16.6.0",
    "react-dom": "^16.6.0"
  }
}
6 条回复
  • zsh19950920 · 真仙
    zsh19950920 · 真仙 #1

    有点问题想请教下大佬 process.env.NODE_ENV 这个属性我在网上查了资料 说NODE_ENV是自定义。本身是没有。 结果我在没设置NODE_ENV的情况下 在入口文件index.js打印了这个变量 结果有值 是development 是怎么回事呢 望解答

  • 求知小风 · 元婴

    默认情况下,这些环境会处理,比如说没有 设置这个值的时候就是 development ,设置了可能就不是,这个没啥,有默认的设置就直接拿来用,没有的话,你就自己设置,一般在 package.json 里的命令 script 里传,当然有些是放在配置文件里

  • zsh19950920 · 真仙
    zsh19950920 · 真仙 #3

    好的 谢谢

  • zsh19950920 · 真仙
    zsh19950920 · 真仙 #4

    "prod": "NODE_ENV=production npx webpack" 大佬为什么我在自己电脑 运行这个脚本 没反应呢

  • 求知小风 · 元婴

    windows 电脑吗,要在前面加 cross_env 吧,要安装这个库,你搜下相关的

  • zsh19950920 · 真仙
    zsh19950920 · 真仙 #6

    确实 window 下要装cross-env "prod": "cross-env NODE_ENV=production webpack" 这样脚本就能执行了 之前百度上查 说的是 window系统 set NODE_ENV=production 就可以设置 如果考虑多个系统上要设置NODE_ENV 为方便统一命令 才推荐装cross-env 。误导了我很久 谢谢了

热门课程 love
喜欢
微信群讲师微信知乎服务号github视频号
程序员随风
课程目录

1Free轻松学 Webpack 4 免费视频教程 #1 课程介绍

2Free轻松学 Webpack 4 免费视频教程 #2 安装

3Free轻松学 Webpack 4 免费视频教程 #3 zero config

4Free轻松学 Webpack 4 免费视频教程 #4 Mode

5Free轻松学 Webpack 4 免费视频教程 #5 搭建项目

6Free轻松学 Webpack 4 免费视频教程 #6 用 npx 来解决全局安装的问题

7Free轻松学 Webpack 4 免费视频教程 #7 配置文件 Webpack.config.js

8Free轻松学 Webpack 4 免费视频教程 #8 配置多入口文件 Entry Points

9Free轻松学 Webpack 4 免费视频教程 #9 什么是 Babel

10Free轻松学 Webpack 4 免费视频教程 #10 babel-loader 的介绍与安装

11Free轻松学 Webpack 4 免费视频教程 #11 Babel Plugins - plugin-transform-arrow-functions

12Free轻松学 Webpack 4 免费视频教程 #12 Babel Plugins - 更多的插件

13Free轻松学 Webpack 4 免费视频教程 #13 Babel Presets - @babel/preset-env

14Free轻松学 Webpack 4 免费视频教程 #14 devtool false 让编译后的代码可读性强一些

15Free轻松学 Webpack 4 免费视频教程 #15 @babel/polyfill 的那些事儿 part 1

16Free轻松学 Webpack 4 免费视频教程 #16 @babel/polyfill 的那些事儿 part 2 - 原理及如何解决

17Free轻松学 Webpack 4 免费视频教程 #17 @babel/polyfill 的那些事儿 part 3 - preset-env 的选项和按须编译

18Free轻松学 Webpack 4 免费视频教程 #18 @babel/runtime

19Free轻松学 Webpack 4 免费视频教程 #19 @babel/plugin-transform-runtime 是如何工作的

20Free轻松学 Webpack 4 免费视频教程 #20 打造 React 开发环境

21Free轻松学 Webpack 4 免费视频教程 #21 使用第一个 Webpack 插件 html-Webpack-plugin

22Free轻松学 Webpack 4 免费视频教程 #22 配置多个单页面应用

23Free轻松学 Webpack 4 免费视频教程 #23 使用 loader 来处理 CSS

24Free轻松学 Webpack 4 免费视频教程 #24 使用 loader 来处理 Sass 和 Less 文件

Free轻松学 Webpack 4 免费视频教程 #25 用 mini-css-extract-plugin 把 CSS 分离成文件

26Free轻松学 Webpack 4 免费视频教程 #26 启动服务器并实时刷新 Webpack-dev-server

27Free轻松学 Webpack 4 免费视频教程 #27 用 clean-Webpack-plugin 来清除文件

28Free轻松学 Webpack 4 免费视频教程 #28 如何打包图片(包含规划编译出的文件的目录结构)

29Free轻松学 Webpack 4 免费视频教程 #29 如何压缩图片

30Free轻松学 Webpack 4 免费视频教程 #30 构建开发和生产环境 - 分离配置文件

31Free轻松学 Webpack 4 免费视频教程 #31 显示打包进度条

32Free轻松学 Webpack 4 免费视频教程 #32 调整配置 - 在浏览器显示 DevServer 的 编译错误的信息

33Free轻松学 Webpack 4 免费视频教程 #33 devtool 和 source map 深入解析

34Free轻松学 Webpack 4 免费视频教程 #34 解决开发环境和生产环境打包不一致的情况

35Free轻松学 Webpack 4 免费视频教程 #35 打包优化 - 深入探索 mode、Optimization、terser-Webpack-plugin、UglifyjsWebpackPlugin

36Free轻松学 Webpack 4 免费视频教程 #36 打包优化 - 生产环境压缩 CSS 文件

学员(70)
100 · 大罗wangyinwei1 · 道祖watin · 练虚vaveee@qq.com · 道祖JesusCracker · 道祖温文尔雅 · 道祖chj12138 · 道祖NullPointer · 道祖爱优美 · 元婴mrj · 大罗wxb0520 · 大乘哄哄 · 大罗
最新动态
100 · 大罗学习到了5:42
wangyinwei1 · 道祖学习到了8:12
watin · 练虚学习到了8:07
vaveee@qq.com · 道祖学习到了0:20
JesusCracker · 道祖学习到了5:27
统计信息
    学员: 19885
    视频数量: 1241
    帖子数量: 443

© 汕尾市求知科技有限公司 | 关注我们 | 专业版网站 | 在线学员:1139

粤公网安备 44152102000088号 | 粤ICP备19038915号

Top