Question

我正在为我的项目制作html，css和js样板。我的目标是建立一个可以启动npm run watch并监视和编译所有文件的设置。还应该将javascript进行转译和复制。

实际上，我有想要的东西。但是我不喜欢的是，现在CSS在文档顶部的<style>标签中的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: ['./'] }
    })
  ]
}

.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"

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

Answer 2

这里是来自Darvin Webpack HTML Boilerplate的现代和旧版浏览器示例：

// snippet from https://github.com/unic/darvin-webpack-boilerplate/blob/master/webpack/settings/style-sass/index.js

const dev = {
  module: {
    rules: [
      {
        test: /\.(css|sass|scss)$/,
        use: [{
          loader: MiniCssExtractPlugin.loader,
          options: {
            hot: true,
            reloadAll: false
          }
        },
        {
          loader: 'css-loader',
          options: {
            sourceMap: true,
            importLoaders: 2,
          },
        },
        {
          loader: 'postcss-loader',
          options: {
            plugins: () => [
              autoprefixer({
                grid: 'autoplace',
                flexbox: 'no-2009'
              })
            ],
            sourceMap: false,
          },
        },
        {
          loader: 'sass-loader',
          options: {
            prependData: '$env: ' + process.env.NODE_ENV + ';',
            webpackImporter: false,
          }
        },
        ],
      },
    ]
  },
  plugins: [
    new StyleLintPlugin({
      context: 'src',
      configFile: '.stylelintrc',
      files: '**/*.scss',
      failOnError: false,
      quiet: false,
      syntax: 'scss'
    }),
    new MiniCssExtractPlugin({
      filename: outputDir
    }),
  ]
};

，如果您使用css vars，这是旧版浏览器的设置：

// https://github.com/unic/darvin-webpack-boilerplate/blob/master/webpack/settings/style-legacy/index.js

const prod = {
  module: {
    rules: [
      {
        test: /\.(css|sass|scss)$/,
        use: [{
          loader: MiniCssExtractPlugin.loader,
        },
        {
          loader: 'css-loader',
          options: {
            sourceMap: false,
            importLoaders: 2,
          },
        },
        {
          loader: 'postcss-loader',
          options: {
            plugins: () => [
              autoprefixer({
                grid: 'autoplace',
                flexbox: 'no-2009'
              }),
              require('postcss-css-variables')({ preserve : false, preserveAtRulesOrder: true })
            ],
            sourceMap: false,
          },
        },
        {
          loader: 'sass-loader',
          options: {
            prependData: '$env: ' + process.env.NODE_ENV + ';',
            webpackImporter: false,
          }
        },
        ],
      },
    ]
  },

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

2 个答案: