webpack-Learning

Install：

Global：

npm i webpack -g

Local:

npm i webpack --save-dev

Pack assests to bundle

via command line:

webpack src/js/main.js --output dist/js/bundle.js --mode development

via npx

npx webpack

config common options

config file:

webpack.config.js

common options:

const path = require('path');  
module.exports={  
    entry:"./src/index.js",  
    output: {  
        filename: "bundle.js",  
        path: path.resolve(__dirname,'dist')  
    },  
    devServer: {  
  
    },  
    module: {  
        rules: [  
            {  
                test:/\.css$/,  
                use:[  
                    {loader: "style-loader"},  
                    {loader: "css-loader"},  
                ],  
            },  
            {  
                test:/\.less$/,  
                use:[  
                    {loader: "style-loader"},  
                    {loader: "css-loader"},  
                    {loader: "less-loader"},  
                ],  
            },  
            {  
                test:/\.scss$/,  
                use:[  
                    {loader: "style-loader"},  
                    {loader: "css-loader"},  
                    {loader: "sass-loader"},  
                ],  
            },  
        ]  
    },  
    plugins: [],  
    mode: "development", //生产模式：production  
    resolve: {  
  
    },  
};