Basic building

Modifying a source file

touch .npmrc
// Define the image
npm config set registry https://registry.npm.taobao.org
Copy the code

Style to deal with

Integrated CSS style handling: CSS-Loader style-Loader Note version number

NPM install [email protected] [email protected] -dCopy the code

configuration

module: {
    rules: [{test: /\.css$/,
            use: ["style-loader"."css-loader"],},],},Copy the code

Sass installation

npm install node-sass sass-loader -D

configuration

rules:[
{
test: /\.scss$/,
use: ["style-loader"."css-loader"."sass-loader"]},Copy the code

Integrated postcss:

Equivalent to Babel in JS

  • Postcss has only two main functions:
  • The first is to parse CSS into an abstract syntax tree AST that JS can manipulate.
  • The second is to call the plug-in to process the AST and get the results. So PostCSS generally handles CSS through plug-ins, not directly

Such as:

Autoprefixercss (for browser compatibility) cssnano(compression)

npm install postcss-loader autoprefixer cssnano -D
Copy the code

Browserslist is set in 3 ways

# Create and configure postcss.config.js
module.exports = {
    plugins: [require("autoprefixer")]};# 1. Configure package.json
"browserslist": ["last 2 versions"."1%" >].# 2. Configure it directly in postcss.config.js
module.exports = {
    plugins: [
        require("autoprefixer")({
            overrideBrowserslist: ["last 2 versions"."1%" >],}),]};# 3. Create a.browserslistrc file
> 1%
last 2 versions
not ie <= 8
Copy the code

Style file separation

Benefits: You can use CDN for parallel download, providing loading speed.

# installation
npm install mini-css-extract-plugin -D
# use
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    module: {
        rules: [
            {
                test: / \. Less $/, use: [/ / plug-in need to participate in parsing module, in this setting this, no longer need style - loader {loader: MiniCssExtractPlugin loader, the options: {HMR:true, // Module hot replace, only need to enable in the development environment // reloadAll:true, / /... Other configurations}},'css-loader'.'postcss-loader'.'less-loader'
                ],
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css', // the name of the output file //... Other configurations}),]};Copy the code