使用Webpack、Babel、Sass和BrowserSync的HTML、CSS和JS样板文件

我正在为我的项目制作一个html、css和js样板。我的目标是建立一个可以启动

npm run watch

并监视和编译所有文件的设置。它还应该传输和聚合javascript

事实上我得到了我想要的。但我不喜欢的是，CSS现在被注入到index.html文档顶部的

标记中。但是这个带有注入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: ['./'] }
    })
  ]
}

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

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"

.babelrc

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

postsss.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: ['./'] }
    })
  ]
}

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

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"

/\u assets/js/src/index.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: ['./'] }
    })
  ]
}

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

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"

---

如果您使用的是webpack4，请尝试使用mini css extract插件将css编译成自己的文件：

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

---

旧版本的webpack您可以使用extract text webpack插件：

Darvin webpack HTML样板中的现代和传统浏览器示例：

//来自https://github.com/unic/darvin-webpack-boilerplate/blob/master/webpack/settings/style-sass/index.js
常量开发={
模块：{
规则：[
{
测试：/\（css | sass | scss）$/，
使用：[{
加载器：MiniCssExtractPlugin.loader，
选项：{
热：是的，
重载所有：false
}
},
{
加载器：“css加载器”，
选项：{
sourceMap:true，
进口装载机：2，
},
},
{
加载器：“postss加载器”，
选项：{
插件：（）=>[
自动刷新器({
网格：“自动替换”，
flexbox：“no-2009”
})
],
sourceMap:false，
},
},
{
加载器：“sass加载器”，
选项：{
prependData:“$env:”+process.env.NODE_env+”；”，
网页导入器：false，
}
},
],
},
]
},
插件：[
新样式插件({
上下文：“src”，
配置文件：'.stylelintrc'，
文件：'***.scss'，
失败者：错，
安静：错，
语法：“scss”
}),
新的MinicsSextract插件({
文件名：outputDir
}),
]
};