美文网首页
webpack实践(1)-- 安装

webpack实践(1)-- 安装

作者: kim_jin | 来源:发表于2019-06-20 16:24 被阅读0次

安装webpack

我现在本地搭建一个项目,来研究webpack的用法,先用git bash 新建一个项目,这样的目的是为了生成一个package.json的文件,有了这个包我们才可以进行后续的装包。

//如果没有额外的消息要写的话,可以添加-y参数,想要进行详细的配置的话可以去掉-y
npm init -y 

执行后我们得到的项目目录为:

对webpack进行配置
npm install --save-dev webpack // 直接安装
npm install --save-dev webpack@<version> // 指定版本进行安装

安装过之后,然后按照要求新建两个文件,现在的项目目录如下:

新建的文件的目录

index.jsindex.html进行编写,编写的内容如下:

index.html index.js

package.json进行调整

package.json

创造一个bundle

我们将上面项目进行目录调整,调整的结果为:

对目录结构进行调整

我们为了避免断网的情况,将loash的依赖安装进来,安装lodash依赖的语句是:

npm install --save lodash

我们现在看一下修改过目录结构之后,我们的代码变成了如下的样式:

index.js index.html

我删除了上面显示的引入<script src="https://unpkg.com/lodash@4.16.6"></script>这一行的代码,然后将index.js 改成了main.js,然后执行npx webpack 打包成功后访问,在浏览器中打开index.html,如果一切正常,你应该能看到以下文本:Hello webpack。当然在打包过程中会有一定的警告 ,但是这并不影响使用。

使用配置文档

先添加一个用来配置webpack的配置文档

配置文档

配置文档的内容如下:

配置文档的配置信息

然后我们执行命令npx webpack --config webpack.config.js来打包这个文档,打包成功,在界面上显示Hello webpack的字样。

npm scripts

我们可以对指定的命令进行封装

script的封装

这样的话我们就可以不使用npx webpack 而是npm build

相关文章

  • webpack实践(1)-- 安装

    安装webpack 我现在本地搭建一个项目,来研究webpack的用法,先用git bash 新建一个项目,这样的...

  • 十天 webpack

    1. webpack 安装 -安装本地的webpack-webpack webpack-cli -D (项目上线时...

  • webpack 打包

    1. 全局安装 webpack 和 webpack-cli 2. 项目中安装 webpack 和 webpack-...

  • react+webpack 开发web app(一)

    webpack初体验 1、全局安装webpack,安装命令:npm install -g webpack 2、新建...

  • vue-cli 脚手架安装

    1,安装vue-cli (1)全局安装webpack 使用npm(需要安装node环境)全局安装webpack,打...

  • webpack搭建server

    参考:webpack文档--开发 1. 新建项目 2. 安装 安装webpack到开发环境 2.安装webpack...

  • webpack

    安装 webpack 1.npm install -g webpack 此时全局安装 webpack 如果想本地化...

  • 2019-05-20

    webpack——webpack-dev-server 1.安装"webpack-dev...

  • vue项目搭建

    工具安装 1、安装node2、安装webpack: npm install webpack -g3、安装vue-...

  • 在es6模块中怎么引入传统的jQuery和jQuery插件呢?

    1、安装webpack和loader 为什么要安装webpack? 因为我们要用到webpack的 expose-...

网友评论

      本文标题:webpack实践(1)-- 安装

      本文链接:https://www.haomeiwen.com/subject/lmjhqctx.html