建立项目的webpack简单配置

AlphaWatch 发布于2019-08-22 11:22 / 3443人阅读

摘要：下新建和文件夹，如下图所示配置官方文档地址根目录下新建文件，配置内容如下入口文件的配置项出口文件的配置项打包的路径文职打包的文件名称新建入口文件及代码如下运行以下命令打包成功以后，在下会多一个文件夹，里边是打包后文件最简单的打包配置完成。

实战项目中的 Webpack 配置：

说明：以下命令通过 Git Bash 执行

1.建立webpack-demo文件夹及npm初始化

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project
$ mkdir webpack-demo
    
Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project
$ cd webpack-demo/
    
Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project/webpack-demo
$ npm init

然后一路回撤，npm初始化成功，建立package.json，用于存放npm的相关信息（主要是安装模块信息）

2.安装 Webpack

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project/webpack-demo
$ npm install webpack --save-dev

3.建立项目所需文件夹

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project/webpack-demo
$ mkdir src

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project/webpack-demo
$ mkdir dist

然后Sublime打开"webpack-demo"，并新建 index.html, 引入一会打包后的 bundle.js 文件。
src下新建script和style文件夹，如下图所示：

4.配置 webpack.config.js

官方文档地址：https://webpack.js.org/configuration/
根目录下新建 webpack.config.js文件，配置内容如下：

const path = require("path");
module.exports = {
    entry: "./src/script/main.js", // 入口文件的配置项
    output:{ // 出口文件的配置项
        path: path.resolve(__dirname, "dist/js"), // 打包的路径文职
        filename: "bundle.js" // 打包的文件名称
    }
};

新建入口文件 main.js 及代码如下：

function helloWorld() {
    
}

Git Bash 运行以下命令

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project/webpack-demo
$ webpack

打包成功以后，在 dist下会多一个js文件夹，里边是打包后文件bundle.js.
最简单的 Webpack 打包配置完成。

GPU云服务器云服务器简单的asp项目 webpack cdn配置 webpack配置cdn webpack常用配置项

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92280.html

webpack的学习之路~~第一天

摘要：第节认识的作用学习的一原因现在的前端网页功能丰富，特别是单页应用技术流行后，的复杂度增加和需要一大堆依赖包，还需要解决，新增样式的扩展写法的编译工作。在出现后，还肩负起了优化项目的责任。其实就是获取了项目的绝对路径。第01节：认识WebPack的作用：学习的一原因：现在的前端网页功能丰富，特别是SPA（single page web application 单页应用）技术流行后，...

blankyao 2019-08-22 17:03 评论0 收藏0
webpack基础用法

摘要：的用法全在配置中是在环境下运行的，学习之前，请先自行安装环境含安装第一步全局安装第二步建立项目文件夹，如一直回车下去项目目录本地安装搭建目录结构在项目根目录下的简单目录结构如下入口文件安装时，自动建立 ----------webpack的用法全在配置中！！webpack是在node环境下运行的，学习webpack之前，请先自行安装node环境（含npm）；安装webpack：第一步...

yexiaobai 2019-08-19 18:10 评论0 收藏0
webpack从零开始搭建多页面（一）:webpack起步到运行一个简单的demo

摘要：文件夹用来存放供浏览器读取的文件，这个是打包成的文件。在文件下手动建立一个文件，并写入下面的代码。配置出口文件的地址在版本后，支持多出口配置。可以防止不同操作系统之间的文件路径问题，并且可以使用相对路径按照预期工作。搭建webpack_demo1项目，使其运行起来 webpack的强大就不介绍了，我们直接动手做起来，我们从零开始一步步搭建一个多页面的系统，多参考webpack中文文档...

EsgynChina 2019-08-26 11:39 评论0 收藏0
React入门系列 - 2 编写第一个Hello world的React程序

摘要：安装必要的开发包安装两个包安装编写一个的首先我们编写一个的组件但是这仅仅是一个组件，我们需要一个页面来容纳的组件。到这一步，需要准备的东西已经完成了。 2.1 采用create react app 编写 create-react-app项目 [[点击前往Github]](https://github.com/facebook/c... 是facebook推出的入门初始化项目，适合新手第...

PingCAP 2019-08-23 14:37 评论0 收藏0
ES6-开发环境搭建（1）

摘要：全局安装本地安装转码规则安装完成后，我们可以看一下我们的文件，已经多了选项。直接在线编译提供一个在线编译器，可以在线将代码转为代码。古语有云：君子生非异也，善假于物；工欲善其事，必先利其器。由于有些低版本的浏览器还是不支持ES6语法，学习ES6，首先要学会搭建一个基本的ES6开发环境，利用工具，把ES6的语法转变成ES5的语法。 1、使用Babel把ES6编译成ES5 1...

android_c 2019-08-23 15:21 评论0 收藏0