webpack4构建简单前端框架-----开发环境配置

最新推荐文章于 2024-07-28 00:56:04 发布

MAXLZ

最新推荐文章于 2024-07-28 00:56:04 发布

阅读量459

点赞数

分类专栏：【Web前端】webpack 文章标签： webstorm webpack4 打包

本文链接：https://blog.csdn.net/qq_33635385/article/details/85277748

版权

【Web前端】webpack 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、使用WebStorm创建一个简单项目。

在项目中建立如下文件夹：src、dist，在src中分别建立js、css、html、img文件夹、webpack.config,js，并在相应目录下建立createElem.js、index.js、index.html，index.css,项目结构如下(此时没有node_moudles、package.json、package-lock.json)：

相应文件内容如下：

①createElem.js

module.exports = function(){
    let p = document.createElement("p");
    p.innerHTML = "我是动态添加的";
    return p;
}

②index,js

const createElem = require("./createElem.js");
document.getElementById("append").onclick = function(){
    let p = createElem();
    document.getElementById("app").appendChild(p);
}

③index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
<body>
    <button id="append">添加DOM</button>
    <div id="app"></div>
</body>
</html>

④index.css

p{
    border:1px solid #221133;
}

二、命令操作

1.生成package.json(定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）)

使用如下命令：

npm init -y // 生成package.json -y默认设置

package.json内容

{
  "name": "msunui",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack" // 这里build相当于代替webpack指令，使用npm run build（这是JSON文件，注释应删除）
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2.安装相关依赖

npm install webpack webpack-cli -D // 这里我没有使用全局安装 -D生产环境使用，依赖添加到devDependencies节点下； -s一般上线使用：依赖会添加到dependencies节点下

安装依赖后的package.json文件内容：

{
  "name": "msunui",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.28.2",
    "webpack-cli": "^3.1.2"
  }
}

3.编写webpack.config.js。

module.exports = {
    entry:"./src/js/index.js", // 入口文件
    output:{
        path: __dirname+"/dist/html", //输出文件路径必须是个绝对路径
        filename: "bundle.[hash].js" // 输出文件名，hash是个哈希，解决浏览器缓存问题
    },
    module: {

    }, // 模块，此处可添加一些loader
    mode:"development", // 设置打包模式，development：开发模式，代码不压缩；production：生产模式，代码会进行压缩。不设置该值打包时，会警告
    plugins: [] // 插件集
}

三、打包

打包命令：

webpack

npm run build // 因为在package.json中的scripts节点下添加了"build": "webpack"

打包后会在dist目录下生成 html/bundle.c36572422ef40197220a.js的js文件。

四、使用插件

经过上面三个步骤之后我们得到了一个打包好的js文件，现在我们试着用一下这个文件。在dist/html里新建一个index.html,内容和src/html/index.html一样，引入我们刚刚生成的js文件，在浏览器中打开index.html：

运行成功。

因为我们每次打包的js都会带有一个哈希值，这个值每次打包都是不一样的，那么每次都要重新引入js；而且index.html在src/html下就有，再复制一遍似乎有点麻烦。下面我们使用webpack的插件来解决这个问题：

1.html-webpack-plugin插件

npm install html-webpack-plugin -D // 引入插件

引入插件后，在webpack.config.js中配置我们的插件信息：

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry:"./src/js/index.js",
    output:{
        path: __dirname+"/dist/html",
        filename: "bundle.[hash].js"
    },
    module: {

    },
    mode:"production",
    plugins: [
        new HtmlWebpackPlugin({
            filename:"index.html", // 新文件名字
            template:"./src/html/index.html", // 文件模板
            title:"Webpack Test" // 文件的title
        })
    ]
}

修改src/html/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 获取设置的文件title -->
    <title><%= htmlWebpackPlugin.options.title %></title>
<body>
    <button id="append">添加DOM</button>
    <div id="app"></div>
</body>
</html>

重新npm run build,打包后，你会发现dist/html中有两个js，每次打包都会生成一个js，而之前的js也会存在，为了解决这个问题我们再使用clean-webpack-plugin插件。

2.clean-webpack-plugin

安装及使用方法同上。

webpack.config.js如下：

const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
let pathToClean = ["./dist/html"];
module.exports = {
    entry:"./src/js/index.js",
    output:{
        path: __dirname+"/dist/html",
        filename: "bundle.[hash].js"
    },
    module: {

    },
    mode:"production",
    plugins: [
        new HtmlWebpackPlugin({
            filename:"index.html",
            template:"./src/html/index.html",
            title:"Webpack Test"
        }),
        new CleanWebpackPlugin(pathToClean)
    ]
}

相关插件的使用方法可在这里查看：npm网站