webpack4.17.1起步

最新推荐文章于 2024-09-30 14:16:02 发布

weixin_34087307

最新推荐文章于 2024-09-30 14:16:02 发布

阅读量110

点赞数

文章标签： webpack json javascript ViewUI

原文链接：https://segmentfault.com/a/1190000016199467

版权

本地安装webpack

npm install --save-dev webpack

如果使用webpack4+版本，需要安装webpack-cli

npm install webpack webpack-cli --save-dev

初始化npm

初始化npm后，会生根目录下成一个package.json

npm init -y

创建文件目录，文件，内容

文件结构

webpack
|-/src
  |-index.js
|-index.html
|-package.json

src/index.js

function component () {
  var ele = document.createElement('div')
  // Lodash[Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。
  // Lodash 的模块化方法 非常适用于：
  // 遍历 array、object 和 string
  // 对值进行操作和检测创建符合功能的函数 https://www.lodashjs.com/]（目前通过一个 script 脚本引入）对于执行这一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  return element;
}
document.body.appendChild(component());

index.html

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

package.json
实际情况中，json文件中不允许有注释，如果有注释，会导致安装不了依赖

{
  ...
  "name": "webpack",
  "version": "1.0.0",
  // "main": "index.js", // 并且移除 main 入口
  "private": true, // 以便确保我们安装包是私有的(private) 这可以防止意外发布你的代码
   ...
}

总结：通过script脚本引入三方资源会带来一些问题，如下：

无法立即体现，脚本的执行依赖于外部扩展库(external library)
如果依赖不存在，或者引入顺序错误，应用程序将无法正常运行
如果依赖被引入但是并没有使用，浏览器将被迫下载无用代码

使用 webpack 来管理这些脚本

创建一个 bundle 文件

调整目录结构

webpack
|-/src "源"代码，用于书写和编辑的代码
  |-index.js
|-/dist "分发"代码是构建过程产生的代码最小化和优化后的“输出”目录，最终将在浏览器中加载
  |-index.html
|-package.json

不再使用script引入三方资源，要在 index.js 中打包 lodash 依赖，安装lodash

npm install --save-dev lodash

修改src/index.js文件

// 不再使用script引入lodash 本地已安装loadash,使用import引入lodash
import _ from 'lodash'
function component () {
  var ele = document.createElement('div')
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  return element;
}
document.body.appendChild(component());

修改dist/index.html文件

<!doctype html>
<html>
  <head>
    <title>起步</title>
    <!-- 因为现在是通过 import 引入 lodash，所以将 lodash <script> 删除 -->
    <!-- <script src="https://unpkg.com/lodash@4.16.6"></script> -->
  </head>
  <body>
    <!-- 然后修改另一个 <script> 标签来加载 bundle，而不是原始的 /src 文件-->
    <script src="main.js"></script>
    <!-- <script src="./src/index.js"></script> -->
  </body>
</html>

执行npx webpack,构建成功后，在浏览器中打开index.html

使用一个配置文件

新增webpack.config.js

const path = require('path')
module.exports = {
  entry: './src/index.js', // 入口文件
  output: { // 构建后的bundle.js文件输出到dist文件中
    filename: 'bundle.js',
    // _dirname表示当前文件所在的目录的绝对路径
    path: path.resolve(_dirname, 'dist')
  }
};

再次npx webpack --config webpack.config.js
使用cli（npx webpack）来运行本地node_module/.bin/webpack文件,反正我是一直没有构建成功，可能是本地环境问题。QAQ ===

使用npm脚本

太好了，还好还有另外一种方式，555，我们可以设置一个快捷方式。在 package.json 添加一个 npm 脚本(npm script)
package.json 【package.json文件中不能有注释】

{
    ...
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack" // 添加一个 npm 脚本(npm script)
     },
    ...
}

现在我们就可以使用npm run build 命令，来代替npx命令，这里遇到一点问题QAQ