webpack4 化繁为简（一）

nihao 发布于2019-08-05 14:39 / 2583人阅读

摘要：从最简单的到项目中的实践。指令是平台下，并且使用了来安装包的依赖一基础初始化项目会在项目目录下创建文件安装下面来写最简单的一个入门。

webpack4前言背景用途不多说，上来就干。从最简单的demo到项目中的实践。(指令是window 平台下，并且使用了cnpm 来安装包的依赖.)
一.基础demo
1.初始化项目

npm init -y

会在项目目录下创建package.json 文件.
2.安装webpack webpack-cli

cnpm install webpack webpack-cli --save-dev

3.下面来写最简单的一个入门demo。创建src dist 两个文件夹，分别用来放源码和打包后的代码

mkdir src
mkdir dist

在src 手动创建entry.js

document.getElementById("title").innerHTML="monkeykg"

在项目的根目录创建webpack.config.js,内容如下

const path=require("path");
module.exports={
    mode:"development",
    entry:[
        path.join(__dirname,"./src/entry.js")
    ],
    output:{
        path:path.join(__dirname,"dist"),
        filename:"bundle.js"
    },
    // module:{},
    // plugins:[],
    // devServer:{}
}

为了简化webpack 运行的指令输入，可以在package.json文件的添加配置如下

"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build":"npx webpack --config webpack.config.js"//手动添加
  },

可以在命令行中运行了。。

npm run build

webpack最简单的一个demo完成，在dist目录下面会生成一个bundle.js文件，同时手动创建一个index.html在dist目录下，内容如下




    
    
    
    Document

浏览器运行index.html,就可以看到打包文件的js已经生效，页面上有 monkeykg 显示。
附上项目的demo 的目录结构

二.进阶
1.多个入口
webpack.config.js修改如下

const path=require("path");
module.exports={
    mode:"development",
    entry:[
        path.join(__dirname,"./src/entry.js"),
        path.join(__dirname,"./src/entry1.js"),//添加一个入口文件
    ],
    output:{
        path:path.join(__dirname,"dist"),
        filename:"[name].js"//出口文件
    },
    // module:{},
    // plugins:[],
    // devServer:{}
}

entry1.js文件的内容如下

document.getElementById("title").style.color="red";

删除dist的bundle.js，然后运行npm run build，打包生成一个main.js文件。index.html修改引入script的路径"./main.js" ,浏览器运行index.html,输出红色的 monkeykg
2.添加热更新

cnpm install --save-dev webpack-dev-server

在webpack.config.js添加如下代码（附图）

const path=require("path");
const webpackDevServer=require("webpack-dev-server")
module.exports={
    mode:"development",
    entry:[
        path.join(__dirname,"./src/entry.js"),
        path.join(__dirname,"./src/entry1.js"),
    ],
    output:{
        path:path.join(__dirname,"dist"),
        filename:"[name].js"
    },
    // module:{},
    // plugins:[],
    devServer:{
        contentBase:path.join(__dirname,"dist"),
        host:"localhost",
        compress:true,
        port:8888
    }
}

package.json 添加如下

"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "npx webpack --config webpack.config.js",
    "server":"webpack-dev-server"
  },

命令行输入npm run server 然后再浏览器打开localhost:8888,就可以看到index.html 页面，同时修改入口的 js代码，会实时的刷新浏览器，实现了热更新。

3.模块化打包css，并且多带带输出css文件
安装包依赖 style-loader css-loader extract-text-webpack-plugin@next

cnpm install --save-dev style-loader css-loader extract-text-webpack-plugin@next

在src 新建index.css

body{
    background:red;
    color:white;
}

并且在extry.js中引入

import css form "./index.css"

webpck.config.js修改如下：

const path=require("path");
const webpackDevServer=require("webpack-dev-server");
const extractTextWebpackPlugin=require("extract-text-webpack-plugin");
module.exports={
    mode:"development",
    entry:[
        path.join(__dirname,"./src/entry.js"),
        path.join(__dirname,"./src/entry1.js"),
    ],
    output:{
        path:path.join(__dirname,"dist"),
        filename:"[name].js"
    },
    module:{
        rules:[
            {
                test:/.css$/,
                use:extractTextWebpackPlugin.extract({
                    fallback:"style-loader",
                    use: ["css-loader",]
                })
            }
        ]
    },
    plugins:[
        new extractTextWebpackPlugin({
            filename:"index.css"
        })
    ],
    devServer:{
        contentBase:path.join(__dirname,"dist"),
        host:"localhost",
        compress:true,
        port:8888
    }
}

删除main.js，命令行运行 npm run build,完成打包
在dist目录会多一个index.css文件

混合云超融合服务器化繁为简用 webpack4 webpack4教程第一商务第一商务

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/58151.html

webpack4 化繁为简（一）

摘要：从最简单的到项目中的实践。指令是平台下，并且使用了来安装包的依赖一基础初始化项目会在项目目录下创建文件安装下面来写最简单的一个入门。 webpack4前言背景用途不多说，上来就干。从最简单的demo到项目中的实践。(指令是window 平台下，并且使用了cnpm 来安装包的依赖.)一.基础demo 1.初始化项目 npm init -y 会在项目目录下创建package.json 文件...

arashicage 2019-08-23 10:57 评论0 收藏0
webpack4 化繁为简（二）

摘要：书接上文，继续干，配置一些常用的插件使支持压缩插件默认已经有，所以只需要引入就可以使用在中配置生成将的目录下面的移入目录，并且删除以及的引入标签，然后安装包。在中添加后续抽空补上打包以及第三方插件的的配置。。。。。。书接上文，继续干，配置一些常用的插件使支持 uglifyjs js压缩插件 webpack默认已经有uglifyjs，所以只需要引入就可以使用. 在webpack...

graf 2019-08-23 10:56 评论0 收藏0
webpack4 化繁为简（二）

摘要：书接上文，继续干，配置一些常用的插件使支持压缩插件默认已经有，所以只需要引入就可以使用在中配置生成将的目录下面的移入目录，并且删除以及的引入标签，然后安装包。在中添加后续抽空补上打包以及第三方插件的的配置。。。。。。书接上文，继续干，配置一些常用的插件使支持 uglifyjs js压缩插件 webpack默认已经有uglifyjs，所以只需要引入就可以使用. 在webpack...

shiyang6017 2019-08-05 14:39 评论0 收藏0
Swoole 2019 ：化繁为简、破茧成蝶

摘要：开发负责人创建分支，编写单元测试脚本，编写代码，实现提案中的所有内容，最终发起交叉评审，检查代码，提出改进意见，反馈给开发负责人，继续完善细节。 Swoole开源项目从2012年开始发布第一个版本，到现在已经有近7年的历史。在这七年的时间里：提交了8821次代码变更发布了287个版本收到并解决1161次issue反馈合并了603次pull request 共有100位开发者...

adam1q84 2019-07-01 11:14 评论0 收藏0
使用prince-cli，轻松构建高性能React SPA项目~

摘要：对模块进行了打包，监听文件更改刷新等功能，创建了个服务，分别为静态资源服务用于代理本地资源，与自刷新浏览器请求服务用于接受，请求，返回数据服务用于收发消息。除了项目，还可以换成项目。项目地址如果觉得对你有所帮助，多谢支持 prince-cli 快速指南这是一个为快速创建SPA所设计的脚手架，旨在为开发人员提供简单规范的开发方式、服务端环境、与接近native应用的体验。使用它你能够获...

roundstones 2019-08-23 10:29 评论0 收藏0