webpack打包环境构建

最新推荐文章于 2021-10-02 23:34:15 发布

Ernest ZZ

最新推荐文章于 2021-10-02 23:34:15 发布

阅读量206

点赞数 1

分类专栏： html-js 文章标签： vue npm webpack node.js html5

本文链接：https://blog.csdn.net/zhangzhouisme/article/details/106558884

版权

html-js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

安装步骤

前提

预先安装好npm环境，参考官网下载并安装node.js,设置环境变量。

控制台安装基础环境

<1>新建项目工程test-web-vuewebpack-demo

cd .... #先进入工作空间目录
mkdir test-web-vuewebpack-demo #创建目录
cd test-web-vuewebpack-demo #进入该目录

<2>初始化package.json文件

npm init -y

<3>安装依赖包到当前工程

npm install webpack webpack-cli --save-dev

<4>新增以下目录结构、文件和内容：

#新增dist/indx.thml,src/index.js文件
 test-web-vuewebpack-demo
  |- package.json
+ |- /dist  
+   |- index.html
+ |- /src
+   |- index.js

文件src/index.js内容如下：

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

  // lodash（目前通过一个 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>

<5>调整 package.json 文件，以便确保我们安装包是 private(私有的)，并且移除 main 入口。这可以防止意外发布你的代码。

//如下新增"private": true,删除"main": "index.js",
 {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
+   "private": true,
-   "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
    },
    "dependencies": {}
  }

<6>要在 index.js 中装入 lodash 依赖，我们需要在本地安装 library：

npm install --save lodash

之后，在我们的 script 中 import lodash：

+ import _ from 'lodash';
+
  function component() {
    let element = document.createElement('div');

-   // lodash（目前通过一个 script 引入）对于执行这一行是必需的
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

<7>执行命令

npx webpack #会生成/dist/main.js文件

配置警告（是正常的），此时浏览器打开index.html
可以输出：‘Hello webpack’。
在这里插入图片描述
<8>创建一个配置文件：webpack.config.js

#在 webpack v4 中，可以无须任何配置，然而大多数项目会需要很复杂的设置，
#这就是为什么 webpack 仍然要支持 配置文件。
#这比在 terminal(终端) 中手动输入大量命令要高效的多，所以让我们创建一个配置文件：
const path = require('path');

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

<9>通过配置文件重新构建：

#如果 webpack.config.js 存在，则 webpack 命令将默认选择使用它。我们在这里使用 --config 选项只是向你表明，可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用。
npx webpack --config webpack.config.js

<10>针对于npx命令，其实有更好选择：可以修改package.json脚本添加 “build”: “webpack”

 {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.20.2",
      "webpack-cli": "^3.1.2"
    },
    "dependencies": {
      "lodash": "^4.17.5"
    }
  }

之后执行：

#通过在 npm run build 命令和你的参数之间添加两个中横线，可以将自定义参数传递给 webpack，例如：npm run build -- --colors。
npm run build

在这里插入图片描述
总结：现在，你已经有了一个基础构建配置。

Ernest ZZ

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
webpack打包环境构建

安装步骤前提预先安装好npm环境，参考官网下载并安装node.js,设置环境变量。控制台安装基础环境<1>新建项目工程test-web-vuewebpack-democd .... #先进入工作空间目录mkdir test-web-vuewebpack-demo #创建目录cd test-web-vuewebpack-demo #进入该目录<2>初始化package.json文件npm init -y<3>安装依赖包到当前工程npm instal
复制链接

扫一扫