学习webpack4(二)

学习webpack4(二)

目录结构

package.json文件

{
  "name": "webpack2",
  "version": "1.0.0",
  "description": "学习Weboack2",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "server": "webpack-dev-server --config=config/webpack.dev.js --hot --open",
    "build": "webpack --config=config/webpack.dev.js --hot --open"
  },
  "author": "baiyf",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^2.1.1",
    "expose-loader": "^0.7.5",
    "html-webpack-plugin": "^3.2.0",
    "jquery": "^3.3.1",
    "mini-css-extract-plugin": "^0.5.0",
    "raw-loader": "^2.0.0",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "^2.1.2",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  }
}

src中的index.js文件

import "../index.html";  //添加对html的监控
import "./index.css";  //添加对css的监控
import "./index2.css";  //添加对css的监控

var hello = require("./hello.js");
var bind = require("./bind.js");
require("jquery");
document.querySelector("#my").appendChild(hello()); 
document.querySelector("#my").appendChild(bind.inter()); 
$("#clickF").click(()=>{
    $("#my").append("测试jQuery");
})

webpack.dev,js文件

const path = require("path");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); //压缩混淆JS
const HtmlWebpackPlugin = require('html-webpack-plugin'); //打包html文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //实现css分离

module.exports = {
    entry: "./src/index.js", //入口文件
    output: { //出口文件
        path: path.resolve(__dirname, "../dist"), //打包文件夹
        filename: "main.js" //打包文件名称
    },
    //模式选择
    mode: "development",
    //解读css 图片压缩转换
    module: {
        //指定模块解析规则
        rules: [{  
                test: /\.js$/,
                exclude: "/node_modules"    //解析时不包含node_modules
            },
            {
                test: /\.(htm|html)$/,
                use: [
                    'raw-loader'
                ]
            },
            {
                test: /\.css$/, //当前loader处理哪些类型的文件
                use: [MiniCssExtractPlugin.loader, 'css-loader']    //"style-loader 是行内样式"
            },
            {
                test:require.resolve("jquery"), //用来指定获取模块的指定路径
                use:[{
                    loader:"expose-loader",
                    options:"jQuery"
                },{
                    loader:"expose-loader",
                    options:"$"
                }]
            }
        ]
    },
    //插件 用于生产模块和各项功能
    plugins: [
        new UglifyJSPlugin(),
        new HtmlWebpackPlugin({
            minify:{    //对html进行压缩
                removeAttributeQuotes:true, //去掉属性的双引号    
            },
            template:'./index.html' //要打包的的html的模板路径和文件和文件名称
        }),
        new MiniCssExtractPlugin({
            filename:"[name].[contenthash].css",
            chunkFilename:"[id].[contenthash].css"
        })
    ],
    //服务器配置
    devServer: {
        contentBase: path.resolve(__dirname, "../dist"), //本地服务器所加载的页面的所在目录
        host: "192.168.1.4", //服务器ip地址
        port: "8080", //端口配置
        inline: true //实时刷新
    }
}

运行本地服务

npm run server

打包

npm run build  打包后文件都在dist文件夹中对所有的js,css都进行了压缩处理

需要安装的模块支持

npm install webpack-dev-server --save-dev
npm install uglifyjs-webpack-plugin -D
npm install html-webpack-plugin -D
npm install mini-css-extract-plugin -D

npm install raw-loader -D
npm install css-loader -D
npm install style-loader -D
npm install jquery -D
npm install expose-loader -D