webpack 4.x项目快速启动

一时失言乱红尘 2022-05-28 07:29 222阅读 0赞

![70][]

**本次项目基于node 8.4 环境，低版本跑不起来勿吐槽。webpack至少要是4.1.0以上版本。**

**win10系统运行cmd窗口，需要选择“以管理员身份运行”**

![20180401115744416][]

下面贴出所有的demo代码

package.json

{
      "name": "runxadmin",
      "version": "1.0.0",
      "description": "",
      "main": "webpack.config.js",
      "scripts": {
        "build": "webpack --mode development",
        "dev": "webpack-dev-server --mode production"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "clean-webpack-plugin": "^0.1.19",
        "html-webpack-plugin": "^3.1.0",
        "webpack-dev-server": "^3.1.1",
        "autoprefixer": "^8.2.0",
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.4",
        "babel-preset-env": "^1.6.1",
        "bable-loader": "^0.0.1-security",
        "copy-webpack-plugin": "^4.5.1",
        "css-loader": "^0.28.11",
        "extract-text-webpack-plugin": "^4.0.0-beta.0",
        "file-loader": "^1.1.11",
        "glob": "^7.1.2",
        "less": "^3.0.1",
        "less-loader": "^4.1.0",
        "node-sass": "^4.8.3",
        "postcss-loader": "^2.1.3",
        "purify-css": "^1.2.5",
        "purifycss-webpack": "^0.7.0",
        "sass-loader": "^6.0.7",
        "style-loader": "^0.20.3",
        "uglifyjs-webpack-plugin": "^1.2.4",
        "url-loader": "^1.0.1",
        "webpack": "^4.1.0",
        "webpack-cli": "^2.0.13"
      },
      "dependencies": {
        "jquery": "^3.3.1"
      }
    }

**webpack.config.js**

**postcss.config.js**

module.exports ={
        plugins:[
            require('autoprefixer')
        ]
    };

**src**为开发源码目录,**dist**为打包生成的项目目录。

**src/assest**下可以放任意静态文件，可以同步复制到**dist/public**目录中.

**src/css**

a.css

body{
        background:url(../images/404.jpg) right top repeat-y;
    }
    #root{
    	color:red;
    	transform: rotate(45deg);
    }

**src/images**下可以放项目中的图片

**src/js**

a.js

export const a = 12;
    export const b = 5;

**src/less**

a.less

@a:red;
    
    #div1{
        color: @a;
    
        ul{
            li{
                list-style: none;
                height:30px;
                line-height: 30px;
                border-bottom: 1px dashed #000;
            }
        }
    }

**src/sass**

a.scss

$color:green;
    
    #div2{
        color: $color;
    }

**index.html**

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title><%= htmlWebpackPlugin.options.title%></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
        </style>
        <script>
        </script>
    </head>
    <body>
        <div id="box"></div>
        <div id="root"></div>
        <div id="div1">
            我是less
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div id="div2">
            我是scss
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </body>
    </html>

**index.js**

import './css/a.css';
    import imgSrc from './images/404.jpg';
    import './less/a.less';
    import './sass/a.scss';
    
    import {a,b} from './js/a.js';
    console.log(a,b);
    
    //import $ from 'jquery';
    
    $("#box").css({
    	width:'100px',
    	height:'100px',
    	background:'yellow'
    })
    
    let oImg = new Image();
    
    oImg.onload = function(){
    	document.body.appendChild(oImg);
    };
    
    oImg.src = imgSrc;

**.babelrc**

{
        "presets": [
            "env"
        ]
    }

**.gitignore**

.DS_Store
    node_modules/
    /dist/
    npm-debug.log*
    yarn-debug.log*
    yarn-error.log*
    
    # Editor directories and files
    .idea
    .vscode
    *.suo
    *.ntvs*
    *.njsproj
    *.sln

**readme.md**

1.进入文件夹
    	npm install
    
    	2.构建build
    	npm run build
    
    	3.运行webpack-dev-server
    	npm run dev

如有任何问题，欢迎加我的公众号留言讨论，谢谢！

![20180227124137945][]

[70]: /images/20220528/202d878468bf45ab9ca4250484011196.png
[20180401115744416]: /images/20220528/9217b92b0ca849648fe944a86e2bc842.png
[20180227124137945]: /images/20220528/5e2945c164844d1393b1980da11a602a.png