Package the style file CSS

Refer to figure

1. Directory structure

2. Initialize the project in the new directory

steps

// 1. Create file 02_webPack_ Package style resource
// 2. NPM initialization (NPM init)
// 3. Create webpack.config.js
// 4. Create another file
Copy the code

webpack.config.js

const path = require("path")

module.exports = {
    entry: './src/index.js'./ / the entry
    output: {
        // __dirname: the absolute path to the current nodejs file
        path: path.resolve(__dirname, 'dist'), // Output path
        filename: 'built.js'.// Output the file name
    },
    module: {/ / a loader configuration
        rules: [
            // Different loaders handle different files
            //1. Process the CSS file
            {
                test: /\.css$/i.// Rematches the file
                use: [// Which loader to use
                    // use Execution sequence, from right to left and bottom to top
                    // Create a style tag and insert the JS style resource into the head
                    'style-loader'.// Load the CSS file into the JS as a CommonJS module with style strings
                    'css-loader']},//2. Process less files
            {
                test: /\.less$/i,
                use: [
                    {
                        loader: 'style-loader'}, {loader: 'css-loader'}, {// Compile less to CSS
                        loader: 'less-loader',}]},//3. Process SCSS files
            {
                test: /\.s[ac]ss$/i,
                use: [
                    'style-loader'.'css-loader'.// Compile SCSS to CSS
                    'sass-loader',],}],},plugins: [// Plug-in configuration].mode: 'development'./ / pattern configuration development | production | none
}
Copy the code