webpack

头像
BreezingSummer
    阅读 7 分钟

    请参考右边网页的Installation和Getting Started篇：https://webpack.js.org/guides/

    安装webpack

    先使用git bash进入一个你想安装的位置，然后请在git bash里输入如下命令，该命令将下载最新版本的webpack。

    cd //这里填写你想安装的位置
npm install --save-dev webpack

    webpack安装成功及文件夹中新增文件如下二图：
    webpack安装成功_新增文件
    webpack安装成功

    新建信息文件package.json

    webpack安装成功后，如果想在目录下新建一个webpack相关的信息文件，请使用下面命令：

    npm init -y

    信息文件package.json新建成功及文件夹中新增文件如下二图：
    信息文件package.json_新增文件
    信息文件package.json新建成功

    加载Lodash

    方法1

    首先，修改文件夹结构，添加下图中没有的文件夹和文件：
    需添加的文件

    • node_modules、package-lock.json是下载webpack产生的文件

    • package.json是webpack相关的信息文件，现在需要修改私密性

      +   "private": true,        //前面加号表示请 添加 这行
-   "main": "index.js",     //前面减号表示请 删除 这行

    • 添加index.html

      <!doctype html>
<html>
<head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
    <script src="./src/index.js"></script>
</body>
</html>

    • 添加./src/index.js

      function component() {
    let element = document.createElement('div');

    // Lodash, currently included via a script, is required for this line to work
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
}

document.body.appendChild(component());

    完成添加、修改，运行index.html，看到如下结果，说明正确：
    安装设置成功结果

    方法2

    修改文件夹结构，将index.html移入文件夹dist中：
    文件结构_2

    在webpack安装目录下，使用如下命令安装lodash

    cd //这里填写webpack安装目录
npm install --save lodash

    安装成功后，会在node_modules里添加新文件夹lodash、lodash.debounce：
    npm安装lodash
    npm安装lodash_2

    • 修改./src/index.js

      import _ from 'lodash'    //👈新添加的语句

function component() {
    let element = document.createElement('div');

    //Lodash, currently included via a script, is required for this line to work
    element.innerHTML = _.join(['Hello','webpack'],' ');

    return element;
}

document.body.appendChild(component());

    • 修改./dist/index.html

      <!doctype html>
<html>
<head>
    <title>Getting Started</title>
    <!-- <script src="https://unpkg.com/lodash@4.16.6"></script> -->    //👈删除
</head>
<body>
    <!-- <script src="./src/index.js"></script> -->        //👈删除
    <script src="main.js"></script>         //👈添加
</body>
</html>

    完成修改后，还需运行下述命令，确定以./src/index.js为入口（entry point），输出./dist/main.js（output）：

    npx webpack

    输入上述命令后，会提示安装webpack-cli，安装就是了，成功及文件夹dist新增文件如下图：
    npx_webpack_2
    npx_webpack

    完成上述修改，运行index.html，看到如下结果，说明正确：
    npm_lodash_成功

    注意！！至此，在chrome、edge中都行正常显示，firefox中还需在index.html的<head>里添加<meta charset="utf-8">才能看到正确结果

    新建配置文件webpack.config.js

    webpack官方教程里说，如果你是用的是version 4，那其实你是不需要配置文件的，但是很多项目很复杂，可能会用到很多配置，所以还是新建一个配置文件吧。

    As of version 4, webpack doesn't require any configuration, but most projects will need a more complex setup, which is why webpack supports a configuration file.

    首先，请自行创建配置文件./webpack.config.js，(ﾉ*･ω･)ﾉ，指示图标也变得不一样了：
    文件结构_3

    • 添加webpack.config.js内容，配置文件基本格式：

      const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    }
};

    • git bash里操作，将默认配置文件替换为这个配置文件，且成功如下图：

      npx webpack --config webpack.config.js

      webpack.config.js设置成功

    便民优化

    修改./dist/main.js更新命令

    请参考：https://webpack.js.org/guides...

    至此，webpack基本操作已经完成。
    当你修改./src/index.js、./dist/index.html等会改变页面显示的时候，都需要在git bash中输入命令npx webpack进行更新（导出新的./dist/main.js），如果你不喜欢这个命令，你可以自行设置命令。

    • 如果你需要修改更新命令，请修改信息文件./package.json：

      {
  "name": "react-todolist",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "dependencies": {
      "lodash": "^4.17.11",
      "webpack": "^4.20.2"
  },
  "devDependencies": {
      "webpack-cli": "^3.1.2"
  },
  "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "build": "webpack"        //👈新添内容
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

    • 完成上述添加后，你就可以在git bash中使用如下命令对./dist/main.js进行更新：

      npm run build
    • 成功！！
      修改main.js更新命令

    开启watch模式，舍弃次次npm run build、npx webpack

    请参考：https://webpack.js.org/guides...

    watch模式会自动监听你这个文件夹里所有的文件，当你修改一些文件需要更新页面，不再需要在git bash里反复输入npm run build、npx webpack或者你自定义的更新命令，只需要刷新页面就可以查看更新的结果。

    • 如果你需要开启watch模式，请在信息文件package.json里添加如下👈代码：

      {
    "name": "react-todolist",
    "version": "1.0.0",
    "description": "",
    "private": true,
    "dependencies": {
        "lodash": "^4.17.11"
    },
    "devDependencies": {
        "webpack": "^4.20.2",
        "webpack-cli": "^3.1.2"
    },
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "watch": "webpack --watch"        //👈新添加的代码，开启`watch`模式
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
}
    • 想要退出watch模式，只需在git bash里按下快捷键ctrl + c，如果你没改过快捷键的话ㄟ( ▔, ▔ )ㄏ

    使用webpack-dev-server

    请参考：https://webpack.js.org/guides...

    watch模式让你少写一种git bash命令，webpack-dev-pack让你都不再需要写git bash命令就能更新浏览器。

    • 想要启动webpack-dev-server模式，首先需要使用git bash进行安装：

      npm install --save-dev webpack-dev-server

    • 其次，你需要更改配置文件webpack.config.js：

      const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development',
    devServer: {                    //👈新增
        contentBase: './dist'       //👈新增
    },                              //👈新增
};

    • 配置完成后，需要在信息package.json中插入以下👈代码：

      {
    "name": "react-todolist",
    "version": "1.0.0",
    "description": "",
    "private": true,
    "dependencies": {
        "lodash": "^4.17.11"
    },
    "devDependencies": {
        "webpack": "^4.20.2",
        "webpack-cli": "^3.1.2",
        "webpack-dev-server": "^3.1.9"
    },
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "watch": "webpack --watch",
        "start": "webpack-dev-server --open"    //👈新增
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
}

    • 最后，使用如下git bash命令启动，并在你想使用的浏览器中输入网址localhost/8080：

      npm run start
    • 想要退出webpack-dev-server模式，只需在git bash里按下快捷键ctrl + c，如果你没改过快捷键的话ㄟ( ▔, ▔ )ㄏ

    总结

    步骤：

    • 安装webpack
    • 新建信息文件package.json
    • 加载lodash
    • 新建配置文件webpack.config.js
    • （可选）修改./dist/main.js更新命令
    • （可选）使用watch、webpack-dev-server模式

    文件夹结构：

    • index.html：你的主页面
    • main.js：打包好的javascript文件
    • node_modules：安装webpack的文件夹
    • index.js：你的原始javascript文件
    • package-lock.json：安装webpack的文件（使用npm 5才有，没有没有问题）
    • package.json：信息文件
    • webpack.config.js：配置文件

    文件夹结构_3

    Microsoftwebpackgit-bashjavascripthtmlvisual-studio-code
    BreezingSummer
    45 声望0 粉丝
    « 上一篇
    模块化编程、MVC、面向对象编程
    下一篇 »
    Cookie&Session、LocalStorage&SessionStorage、HTTP缓存

    引用和评论

    推荐阅读
    头像
    git

    BreezingSummer阅读 280

    头像
    100个React最佳实践小技巧

    夕水赞 27阅读 6.9k评论 4

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.5k评论 9

    头像
    前端开发工具

    寒青赞 19阅读 5.3k

    头像
    开发插件集合

    寒青赞 14阅读 3.6k

    头像
    喜大普奔，适用于 VS Code 的 GitHub Copilot 全新免费版本正式推出，GitHub 全球开发者突破1.5亿

    鸣飞赞 8阅读 13.6k评论 1

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    0 条评论
    得票最新