webpack4.x配置打包demo

教程参考：webpack4.x配置入门教程：https://blog.csdn.net/weixin_39291021/article/details/86569529
项目目录

config/webpack.dev.config.js

//一个简单的配置
const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');//js压缩插件
const extractTextPlugin = require('extract-text-webpack-plugin')//css分离
const htmlPlugin = require("html-webpack-plugin")//html打包插件
// const glob = require('glob');
// const PurifyCSSPlugin = require("purifycss-webpack");//消除多余的CSS插件
var website ={
    //这里的IP和端口，是你本机的ip或者是你devServer配置的IP和端口。
    publicPath:"http://localhost:8888/"
}
module.exports = {
	mode:'development',
    //入口文件（你要打包，就告诉我打包哪些）
    entry:'./src/hello.js',
	//出口文件（我打包完了，给你放到哪里）
    output:{
        //将所有依赖的模块合并输出到一个index.js文件
        filename:'index.js',
        //输出文件都放到dist目录下
        path:path.resolve(__dirname,'../dist'),
        publicPath:website.publicPath //publicPath：主要作用就是处理静态文件路径。
    },
    //插件，用于生产模板和各项功能
    plugins:[
        new uglify(),
        new extractTextPlugin('css/index.css'),//css分离后的文件路径
        new htmlPlugin({
            minify:{ //是对html文件进行压缩
                removeAttributeQuotes:true  //removeAttrubuteQuotes是却掉属性的双引号。
            },
            hash:true, //为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
            template:'./src/index.html' //是要打包的html模版路径和文件名称。
           
        }),
        // new PurifyCSSPlugin({ 
        //     //这里配置了一个paths，主要是需找html模板，purifycss根据这个配置会遍历你的文件，查找哪些css被使用了。
        //     paths: glob.sync(path.join(__dirname, 'src/*.html')),
        // })
    ],
    //模块
    module:{
        rules:[
            //css loader
            {
                test:/\.css$/,
                // use:[
                //     {loader:"style-loader"},
                //     {loader:"css-loader"}
                // ]
                //css分离的写法
                use:extractTextPlugin.extract({
                    fallback:"style-loader",
                    use:"css-loader"
                })
            },
            //图片 loader
            {
                test:/\.(png|jpg|gif|jpeg)/,  //是匹配图片文件后缀名称
                use:[{
                    loader:'url-loader', //是指定使用的loader和loader的配置参数
                    options:{
                        limit:500,  //是把小于500B的文件打成Base64的格式，写入JS
                        outputPath:'images/', //打包后的图片放到images文件夹下
                        // publicPath:'../images/'
                    }
                }]
            },
            {
                test: /\.(htm|html)$/i,
                use:[ 'html-withimg-loader'] 
            },
            //less loader
            {
                test: /\.less$/,
                // use: [{
                //        loader: "style-loader" // creates style nodes from JS strings
                //     }, 
                //     {
                //         loader: "css-loader" // translates CSS into CommonJS
                //     },
                //     {
                //         loader: "less-loader" // compiles Less to CSS
                // }]
                use: extractTextPlugin.extract({
                    use: [
                        { loader: "css-loader"}, 
                        { loader: "less-loader"}
                    ],
                    // use style-loader in development
                    fallback: "style-loader"
                })
            }
        ]
    },
    //配置webpack开发服务功能
    devServer:{
        //设置基本目录结构,用于找到程序打包地址
        contentBase:path.resolve(__dirname,'../dist'),
        //服务器的IP地址，可以使用IP也可以使用localhost
        host:'localhost',
        //服务端压缩是否开启
        compress:true,
        //配置服务端口号
        port:8888
    }
};

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config=config/webpack.dev.config.js",
    "server": "webpack-dev-server --config=config/webpack.dev.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^2.1.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "html-withimg-loader": "^0.1.16",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "purify-css": "^1.2.5",
    "purifycss-webpack": "^0.7.0",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "^2.1.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1"
  }
}

src/index.html

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<body>
<h1>Hello World!</h1>
<div class="content">aaa</div>
<div class="logo"></div>
<img src="image/photo.jpg">
</body>
</html>

scr/hello.js

import css from './css/index.css'
import less from './css/indexless.less'

console.log("hello world!")

src/css/index.css

body{
	background-color: green;
	color: red;
}
.logo
{
	width: 400px;
	height: 400px;
	background-image: url(../image/photo.jpg);
}

src/css/indexless.less

@base : yellow;
.content{
    width:400px;
    height:400px;
    background-color:@base;
}

命令终端输入npm run server进行打包
浏览器输入http://localhost:8888/即可访问