webpack-基础demo

依赖安装

npm init -y
npm i webpack webpack-cli webpack-dev-server -D
npm i style-loader css-loader postcss-loader autoprefixer less-loader less -D
npm i file-loader url-loader -D
npm i babel-loader @babel/core @babel/preset-env -D
npm i html-webpack-plugin -D
npm i eslint eslint-loader -D
npm i stylelint stylelint-webpack-plugin stylelint-config-standard -D
npm i jest jest-webpack -D
//配置eslint
node ./node_modules/eslint/bin/eslint --init

webpack.config.js
动态配置
modules.exports=function(env,argv){}
静态配置
modules.exports={}

const path=require('path');
module.exports=function(env,argv){
    //env环境配置；argv默认选项
    env=env||{development:true};
    let conf=null;
    if(env.production){
        conf=require('./config/webpack.production');
    }else if(env.development){
        conf=require('./config/webpack.development');
    }else{
        conf=require('./config/webpack.test');
    }
    return {
        entry:'./src/js/index',
        module:{
            rules:[
                //javascript
                {test:/\.(js|jsx)$/i,use:[{
                    loader:'babel-loader',
                    options:{
                        presets:['@babel/preset-env']
                    }
                },{
                    loader:'eslint-loader',
                    options:{
                        exclude:/node_modules|brower_modules/
                    }
                  }]
                },

                //css
                {test:/\.css$/i,use:[ 'style-loader', 'css-loader',{
                    loader:'postcss-loader',
                    options:{
                        plugins:[
                            require("autoprefixer")
                        ]
                    }
                    }]
                },

                //less
                {test:/\.less$/i,use:['style-loader','css-loader','less-loader']},

                //images
                {test:/\.(jpg|png|gif)$/i,use:{
                    loader:'url-loader',
                    options:{
                        outputPath:'imgs/',//相对于output.path
                      //  publicPath:'dest/images/',//输出到css的路径
                        limit:4*1024//小于这个大小，可以转成base64存在css中，减少http连接数
                 
                    }
                  }
                },

                //fonts
                {test:/\.(eot|svg|ttf|woff|woff2)$/i,use:{
                    loader:'url-loader',
                    options:{
                        outputPath:'fonts/',//相对于output.path
                        //publicPath:'dest/fonts/',//输出到css的路径
                        limit:4*1024//小于这个大小，可以转成base64存在css中，减少http连接数
                    }
                  }
                }
            ]
        },
        ...conf
    };
}

config/webpack.development.js

const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const StyleLintPlugin=require('stylelint-webpack-plugin');
module.exports={
    mode:'development',
    output:{
        filename:'bundle.js'//不需要path，存内存
    },
    plugins:[
        new HtmlWebpackPlugin({template:path.resolve(__dirname,'../index.html')}),
        new StyleLintPlugin({
            files:['**/*.css','**/*.less','**/*.html','**/*.htm','**/*.vue','**/*.scss']
        })
    ],
    devtool:'source-map'
}

config/webpack.production.js

const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const StyleLintPlugin=require('stylelint-webpack-plugin');
module.exports={
    mode:'production',
    output:{
        path:path.resolve(__dirname,'../build'),
        filename:'bundle.min.js'
    },
    plugins:[
        new HtmlWebpackPlugin({template:path.resolve(__dirname,'../index.html')}),
        new StyleLintPlugin({
            files:['**/*.css','**/*.less','**/*.html','**/*.htm','**/*.vue','**/*.scss']
        })
    ]
}

config/webpack.test.js

const StyleLintPlugin=require('stylelint-webpack-plugin');
module.exports={
    mode:'development',
    output:{
        filename:'bundle.js'//不需要path，存内存
    },
    plugins:[
        new StyleLintPlugin({
            files:['**/*.css','**/*.less','**/*.html','**/*.htm','**/*.vue','**/*.scss']
        })
    ]
}

package.json

{
  "name": "webpack-project-0523",
  "version": "1.0.0",
  "description": "a webpack project",
  "main": "index.js",
  "scripts": {
    "test": "jest-webpack",
    "start": "webpack-dev-server --env.development --open",
    "build": "webpack --env.production"
  },
  "keywords": [],
  "author": "mmc",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "autoprefixer": "^9.5.1",
    "babel-loader": "^8.0.6",
    "css-loader": "^2.1.1",
    "eslint": "^5.16.0",
    "eslint-loader": "^2.1.2",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^24.8.0",
    "jest-webpack": "^0.5.1",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "postcss-loader": "^3.0.0",
    "style-loader": "^0.23.1",
    "stylelint": "^10.0.1",
    "stylelint-config-standard": "^18.3.0",
    "stylelint-webpack-plugin": "^0.10.5",
    "url-loader": "^1.1.2",
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.4.1"
  },
  "browserslist":[
    "last 5 version", 
    ">1%",
    "not dead"
  ],
  "stylelint":{
    "extends":"stylelint-config-standard"
  },
  "jest":{
    "roots":["./tests/"]
  }
}

.eslintrc.js

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {
        "indent":["error",2],
        "linebreak-style":["error","windows"],
        "quotes":["error","double"],
        "semi":["error","always"]
    }
};

index.html