使用Webpack，Babel，Sass和BrowserSync的HTML，CSS和JS Boilerplate

Question

我正在为我的项目开发一个html，css和js样板文件。我的目标是有一个设置，我可以启动npm run watch，所有文件都被观看和编译。它也应该转换和polypill javascript。

其实我得到了我想要的东西。但我不喜欢的是，现在CSS会在index.html中的文档顶部的<style>标记中注入。但是这个注入了CSS的index.html没有编译，只是由实时服务器提供。

关于如何在自己的文件中编译CSS的任何想法？除此之外，还有任何人对这样一个样板的进一步提示吗？

的package.json

{
  "name": "webpack-babel-boilerplate",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "webpack --watch"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/plugin-transform-runtime": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "autoprefixer": "^9.5.1",
    "babel-loader": "^8.0.5",
    "browser-sync": "^2.26.5",
    "browser-sync-webpack-plugin": "^2.2.2",
    "cross-env": "^5.2.0",
    "css-loader": "^2.1.1",
    "extract-loader": "^3.1.0",
    "file-loader": "^3.0.1",
    "html-loader": "^0.5.5",
    "node-sass": "^4.11.0",
    "postcss-cli": "^6.1.2",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0"
  },
  "dependencies": {
    "@babel/polyfill": "^7.4.0"
  }
}

webpack.config.js

const path = require('path');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')


module.exports = {
  entry: {
    app: ["./_assets/js/src/index.js", "./_assets/css/sass/style.sass"]
  },
  mode: "development",
  output: {
    path: path.resolve(__dirname, "./_assets/js/dist/"),
    publicPath: "/",
    filename: ["bundle.js"]
  },
  module: {
    rules: [{
      test: /\.js?$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
          plugins: ['@babel/plugin-transform-runtime']
        }
      }
    },
    {
            test: /\.sass$/,
      use: [
        "style-loader", 
        "css-loader", 
        "sass-loader" 
        ]
            },
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-transform-runtime']
          }
        }
      },
      {
        test: /\.(html)$/,
        use: {
          loader: 'html-loader',
          options: {
            attrs: [':data-src']
          }
        }
      }
    ]
  },
  watch: true,
  plugins: [
    new BrowserSyncPlugin({

      host: 'localhost',
      port: 3000,
      server: { baseDir: ['./'] }
    })
  ]
}

.babelrc

{
    "presets": [
        ["@babel/preset-env", {
            "useBuiltIns": "entry",
            "debug": true
        }]
    ]
 }

postcss.config.js

module.exports = {
    plugins: {
        'autoprefixer': {}
    }
}

./_assets/就是/双人床/index.就是

import './../../css/sass/style.sass';
import './../../../index.html';

require("@babel/polyfill");
require("./test.js")
require("./onPageLoad.js")
require("./onScroll.js")


// Testing if polyfill is working, since forEach doesnt work in some browsers
let testArray = [1,2,3,4,5];
testArray.forEach( item => {
  alert(item);
});

// Testing live reload
console.log(document.getElementsByTagName('body')[0])
document.body.style.backgroundColor = "pink"

Answer 1

如果您使用的是webpack4，请尝试使用mini-css-extract-plugin将css编译到自己的文件中：https://github.com/webpack-contrib/mini-css-extract-plugin。

它为每个包含CSS的JS文件创建一个CSS文件。

较旧版本的webpack可以使用extract-text-webpack-plugin：https://github.com/webpack-contrib/extract-text-webpack-plugin