webpack入门

最新推荐文章于 2023-10-10 09:51:34 发布

扎扎 dream

最新推荐文章于 2023-10-10 09:51:34 发布

阅读量112

点赞数 2

分类专栏： webpack

本文链接：https://blog.csdn.net/weixin_43644615/article/details/88843441

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这两天刚刚学习了一下webpack,所以我们来记录一下这个过程吧。

首先要确保电脑上有安装node.js和webpack,webpack现在已经是4.0了 ,所以我们需要全局安装一下并执行webpack-cli就可以啦

cnpm install -g webpack
cnpm install -g webpack-cli

第二步，我们新建一个文件夹的名字就叫webpackdom吧，然后我们执行npm init来生成一个package.json的文件，并在根目录下建一个叫index.html的文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="myDiv"></div>
    <p>你好啊，webpack</p>
</body>

</html>

第三步，我们需要在根目录下建立一个名为greeter.js作为一个模块的js文件，并依据CommonJS规范导出这个函数为一个模块，代码如下：

module.exports = function() {
    var geet = 'hello webpack woshimingling'
    return geet
}

第四步，我们需要在根目录下建立名为app的文件下，底下建main.js作为主入口，用require引入此模块，代码如下:

var con = require('../greeter.js')
var dom = document.getElementById('myDiv')
dom.innerHTML = con();

这个时候我们来配置webpack文件，在根目录下建webpack.config.js的文件

代码如下:

module.exports = {
    entry: __dirname + "/app/main.js", //唯一入口文件__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录
    output: {
        path: __dirname + '/public', //打包后的文件存放的地方
        filename: 'bundle.js' //打包后输出文件的文件名
    },
    mode: 'development', // 设置mode

}

有了这个配置之后，再打包文件，只需在终端里运行webpack(非全局安装需使用node_modules/.bin/webpack)命令就可以了，这条命令会自动引用webpack.config.js文件中的配置选项，并且同时编译了greeter.js和main.js;此时就会自动生成bundle.js，这个时候我们需要在index.html里面引入:

<script src="./public/bundle.js"></script>

此时打开index.html会看到hello webpack woshimingling

更快捷的打包任务

我们可以对npm引导任务执行，对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置即可，代码如下:

"scripts": {
        "dev": "node server",
        "build": "webpack",
        "test": "echo \"Error: no test specified\" && exit 1"
    },

写到这里，也就明白了npm run dev是谁在执行了，npm run build最终打包的是谁了。

接下来，我们用node搭建一个服务器吧，在根目录下建一个名为server.js的文件，代码如下：

var express = require('express')

var app = express();
app.get('*', (req, res) => {
    res.sendFile(__dirname + req.path)
})
app.listen(8887, () => {
    console.log('服务器开启成功')
})

这个时候，需要开启服务，在终端输入命令node server，（当然，npm run dev也是可以的，因为前面我们配置了dev:node server）就会看到服务器开启成功，在浏览器输入http://localhost:8887/#/就能看到我们写的东西了。

现在我们来记录一下打包的过程吧

这个时候，我们需要打开package.json文件，看一下output输出的内容：

const path = require('path'); //nodejs的语法，引入路径模块，为了输出的时候找绝对路径
output: {
         // path: __dirname + '/public', //打包后的文件存放的地方
         // filename: 'bundle.js' //打包后输出文件的文件名
         path: path.resolve(__dirname, 'dist'), //path.resolve为node.js的固定语法，用于找到当前文件的绝对路径
         filename: 'js/bundle.js' //打包后输出文件的文件名
     },

然后在命令行执行npm run build，就会看到一个dist文件夹底下有个js文件夹中，有bundle.js;其中我们还会有疑问，在vue打包的时候，还会生成一个index.html，那这个是怎么生成的呢？

首先执行命令：

cnpm install html-webpack-plugin --save-dev

然后在webpack.config.js中引入

var htmlWebpackPlugin = require('html-webpack-plugin');

初始化插件:

//安装自动生成html的插件
    plugins: [
        //初始化html插件
        new htmlWebpackPlugin({
            template: './index.html', //指定生成html的模板
            filename: 'index.html', //编译好的文件名
            inject: 'body' //将脚本js放在哪个标签内
        })
    ]

我们接下来看到整个的webpack.config.js是这样的

const path = require('path'); //nodejs的语法，引入路径模块，为了输出的时候找绝对路径
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: __dirname + "/app/main.js", //唯一入口文件__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录
    output: {
        // 这里有两种写法
        // path:__dirname + '/public',//打包后的文件存放的地方
        path: path.resolve(__dirname, 'dist'), //path.resolve为nodejs的固定语法，用于找到当前文件的绝对路径
        filename: 'js/bundle.js' //打包后输出文件的文件名
    },
    devServer: {
        contentBase: "./", //本地服务器所加载的页面所在的目录
        historyApiFallback: true, //不跳转
        hot: true, //实现热加载         
        port: 8080, //设置端口 
        inline: true //试试刷新
    },

    mode: 'development', // 设置mode
    //安装自动生成html的插件
    plugins: [
        //初始化html插件
        new htmlWebpackPlugin({
            template: './index.html', //指定生成html的模板
            filename: 'index.html', //编译好的文件名
            inject: 'body' //将脚本js放在哪个标签内
        })
    ]

}

然后，我也把package.json贴一下吧，因为在做的过程中，可能没有依赖成功，npm run build的时候就会报错，这个时候就要看一下这个文件了，代码如下:

{
    "name": "webpackdom",
    "version": "1.0.0",
    "description": "",
    "main": "main.js",
    "scripts": {
        "dev": "node server",
        "build": "webpack",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "express": "^4.16.4"
    },
    "devDependencies": {
        "html-webpack-plugin": "^3.2.0",
        "webpack": "^4.29.3",
        "webpack-cli": "^3.2.3",
        "webpack-dev-server": "^3.1.14"
    }
}

同时，这个时候，我们需要把index.html的script标签给去掉了，然后cnpm i 执行---->npm run build，就会看到和vue打包的时候一样的样子了。

扎扎 dream

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
webpack入门

这两天刚刚学习了一下webpack,所以我们来记录一下这个过程吧。首先要确保电脑上有安装node.js和webpack,webpack现在已经是4.0了 ,所以我们需要全局安装一下并执行webpack-cli就可以啦cnpm install -g webpackcnpm install -g webpack-cli第二步，我们新建一个文件夹的名字就叫webpackdom吧，然后我们...
复制链接

扫一扫