HTML, CSS и JS Boilerplate с использованием Webpack, Babel, Sass и BrowserSync - PullRequest
Новая
       36

HTML, CSS и JS Boilerplate с использованием Webpack, Babel, Sass и BrowserSync

0 голосов
/ 29 апреля 2019

Я работаю над шаблонами html, css и js для моих проектов.Моя цель - настроить, где я могу запустить npm run watch, а все файлы просматриваются и компилируются.Это также должно привести к тому, что javascript должен быть пропущен и удален.

На самом деле я получил то, что хотел.Но что мне не нравится, так это то, что CSS теперь вставляется в index.html в теге <style> в верхней части документа.Но этот index.html с внедренным CSS не компилируется, он просто представлен живым сервером.

Есть идеи, как скомпилировать 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 / js / src / index.js 

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"

1 Ответ

0 голосов
/ 29 апреля 2019

Если вы используете webpack4, попробуйте использовать mini-css-extract-plugin для компиляции css в его собственный файл: https://github.com/webpack-contrib/mini-css-extract-plugin.

Он создает файл CSS для каждого файла JS, которыйсодержит CSS.

В старых версиях веб-пакета вы можете использовать extract-text-webpack-plugin: https://github.com/webpack-contrib/extract-text-webpack-plugin

...