1. 新建文件夹，命名为项目名称——myapp，并打开myapp文件夹。

mkdir webpack-demo && cd webpack-demo

2. 在./myapp中打开命令行窗口，输入 npm init ，初始化npm

可一直按回车，使用默认配置。

此时，./myapp中生成package.json文件。

3. 本地安装webpack和 webpack-cli（此工具用于在命令行中运行 webpack）【1】

npm install webpack webpack-cli --save-dev

此时，package.json内容为：

./myapp为：

4. 创建项目目录结构、文件和内容

（1）创建src文件夹，用于存放开发源码

（2）创建dist文件夹，用于存放发布的代码，以及webpack打包后的文件

（3）./myapp/src新建index.js，内容为：

function component() {

  var element = document.createElement('div');

  // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的

  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;

}

document.body.appendChild(component());

（4）./myapp/dist新建index.html，内容为：

<!doctype html>

<html>

  <head>

    <title>react项目实践</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 入口。这可以防止意外发布你的代码。

  {

    "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.0.1",

      "webpack-cli": "^2.0.9"

    },

    "dependencies": {}

  }

此时，项目目录为：

  myapp

   |- package.json
   |- package-lock.json
   |- node_modules

   |- /dist

     |- index.html

   |- /src

     |- index.js

5. 安装lodash

npm install --save lodash

然后，修改./myapp/src/index.js

import _ from 'lodash';

function component() {

    var element = document.createElement('div');

    element.innerHTML = _.join(['Hello', 'webpack1.0'], ' ');

    return element;

}

document.body.appendChild(component());

修改./myapp/dist/index.html

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <meta name="theme-color" content="#000000">

        <title>react项目实践</title>

    </head>

    <body>

        <div id="app"></div>

        <script src="bundle.js"></script>

    </body>

</html>

6. 使用webpack配置文件

（1）在./myapp创建webpack.config.js文件，内容为：

const path = require('path');

module.exports = {

  entry: './src/index.js',

  output: {

    filename: 'bundle.js',

    path: path.resolve(__dirname, 'dist')

  }

};

（2）通过配置文件构建

在命令行执行 npx webpack --config webpack.config.js 【2】

若成功，则./myapp/dist下生成bundle.js文件，打开./myapp/dist/index.html，浏览器显示为

7. 添加npm脚本

考虑到用 CLI 这种方式来运行本地的 webpack 不是特别方便，我们可以设置一个快捷方式。在 package.json 添加一个 npm 脚本(npm script)： "build": "webpack"

现在，可以使用 npm run build 命令，来替代 npx 命令。

在命令行运行 npm run build

注：

【1】.  npm install 的几种命令形式：

npm install moduleName # 安装模块到项目目录下

npm install -g moduleName # -g 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置。

npm install -save moduleName # -save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。

npm install -save-dev moduleName # -save-dev 的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。

npm install moduleName 命令

1. 安装模块到项目node_modules目录下。
2. 不会将模块依赖写入devDependencies或dependencies 节点。
3. 运行 npm install 初始化项目时不会下载模块。

npm install -g moduleName 命令

1. 安装模块到全局，不会在项目node_modules目录中保存模块包。
2. 不会将模块依赖写入devDependencies或dependencies 节点。
3. 运行 npm install 初始化项目时不会下载模块。

npm install -save moduleName 命令

1. 安装模块到项目node_modules目录下。
2. 会将模块依赖写入dependencies 节点。
3. 运行 npm install 初始化项目时，会将模块下载到项目目录下。
4. 运行npm install --production或者注明NODE_ENV变量值为production时，会自动下载模块到node_modules目录中。

npm install -save-dev moduleName 命令

1. 安装模块到项目node_modules目录下。
2. 会将模块依赖写入devDependencies 节点。
3. 运行 npm install 初始化项目时，会将模块下载到项目目录下。
4. 运行npm install --production或者注明NODE_ENV变量值为production时，不会自动下载模块到node_modules目录中。

总结

devDependencies 节点下的模块是我们在开发时需要用的，比如项目中使用的 gulp ，压缩css、js的模块。这些模块在我们的项目部署后是不需要的，所以我们可以使用 -save-dev 的形式安装。像 express 这些模块是项目运行必备的，应该安装在 dependencies 节点下，所以我们应该使用 -save 的形式安装。

【2】npx：npm v5.2.0引入的一条命令（npx），引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验。

举例：使用create-react-app创建一个react项目。

老方法：

npm install -g create-react-app

create-react-app my-app

npx方式：

npx create-react-app my-app

这条命令会临时安装 create-react-app 包，命令完成后create-react-app 会删掉，不会出现在 global 中。下次再执行，还是会重新临时安装。

主要特点：

1、临时安装可执行依赖包，不用全局安装，不用担心长期的污染。
2、可以执行依赖包中的命令，安装完成自动运行。
3、自动加载node_modules中依赖包，不用指定$PATH。
4、可以指定node版本、命令的版本，解决了不同项目使用不同版本的命令的问题。

参考：

https://www.webpackjs.com/guides/getting-started/#%E5%9F%BA%E6%9C%AC%E5%AE%89%E8%A3%85

https://www.jianshu.com/p/cee806439865

https://www.limitcode.com/detail/59a15b1a69e95702e0780249.html

react项目实践——（1）使用webpack创建项目的更多相关文章

  1. JavaScript 项目构建工具 Grunt 实践：安装和创建项目框架

     Grunt 是一个基于任务的 JavaScript 项目命令行构建工具,运行于 Node.js 平台.Grunt 能够从模板快速创建项目,合并.压缩和校验 CSS & JS 文件,运行单元测 ...

  2. vue.js+koa2项目实战（一）创建项目和elementUI配置

    前端采用vuex+element-ui: 后端采用koa2+restfulAPI+sequlize: (一)项目介绍 宠物社区 1.社区 2.好友 3.说说 4.宠粮 5.健康 (二)项目框架 1.V ...

  3. react 项目实战（一）创建项目 及 服务端搭建

    1.安装 React社区提供了众多的脚手架,这里我们使用官方推荐的create-react-app. //安装脚手架 npm install -g create-react-app //生成并运行项目 ...

  4. vue.js---利用vue cli脚手架工具+webpack创建项目遇到的坑

    1.Eslint js代码规范报错 WARNING Compiled with 2 warnings 10:43:26 ✘ http://eslint.org/docs/rules/quotes St ...

  5. koa 项目实战（一）创建项目

    1.安装模块 npm install koa koa-router --save npm install -g nodemon 2.入口文件 app.js const Koa = require('k ...

  6. Vue2+Webpack创建vue项目

    相比较AngularJS和ReactJS,VueJS一直以轻量级,易上手称道.MVVM的开发模式也使前端从原先的DOM中解放出来,我们在不需要在维护视图和数据的统一上花大量时间,只需要关注于data的 ...

  7. vue-cli3安装创建项目以及目录结构

    安装脚手架cli3.0 全局安装 npm install -g @vue/cli 或 yarn global add @vue/cli 查看版本/是否安装成功 vue -V 如果你仍然需要使用旧版本的 ...

  8. Jenkins配置MSBuild实现自动部署2（项目实践）

    继上一篇文章http://www.cnblogs.com/EasonJim/p/6077225.html,大致实现的思路,今天来记录一个真实项目实践. 一.新建项目 选择[构建一个自由风格的软件项目] ...

  9. vue-cli 3.0 安装和创建项目流程

    使用前我们先了解下3.0较2.0有哪些区别 一.3.0 新加入了 TypeScript 以及 PWA 的支持二.部分命令发生了变化: 1.下载安装  npm install -g vue@cli 2. ...

随机推荐

  1. js课程 2-7 带默认参数的函数怎么写

    js课程 2-7 带默认参数的函数怎么写(注意参数顺序) 一.总结 一句话总结:默认参数一定要放在最后面,而且还有注意你调用参数的时候给参数的顺序习惯.直接加个等于号就可以是默认参数.function ...

  2. google analytics是什么（免费的网站流量分析服务：比如分析有多少个人来了你的网站，告诉你怎么样才能在网站上面实现最大收益。）

    google analytics是什么(免费的网站流量分析服务:比如分析有多少个人来了你的网站,告诉你怎么样才能在网站上面实现最大收益.) 一.总结 免费的网站流量分析服务:比如分析有多少个人来了你的 ...

  3. HTML标签的权重

    原文 简书原文:https://www.jianshu.com/p/c86d540aec40 大纲 1.HTML权重标签 2.常见的权重标签 3.常见的权重标签的使用 1.HTML权重标签 SEOer ...

  4. Html表单中遇到的问题

    原文 https://www.jianshu.com/p/4466b8294007 大纲 1.表单提交的方式GET和POST的区别 2.js无法对input的file类型的值进行赋值 3.js获取in ...

  5. ios开发swift学习第三天：逻辑分支

    一. 分支的介绍 分支即if/switch/三目运算符等判断语句 通过分支语句可以控制程序的执行流程 二. if分支语句 和OC中if语句有一定的区别 判断句可以不加() 在Swift的判断句中必须有 ...

  6. win7

    http://www.xitongiso.com/?pot http://www.potplayer.org/

  7. IOS的后台执行

    写在前面给大家推荐一个不错的站点  www.joblai.com 本文章由央广传媒开发部 冯宝瑞整理.哈哈 http://www.cocoachina.com/bbs/read.php? tid=14 ...

  8. 【漏洞公告】Tomcat信息泄漏和远程代码执行漏洞：CVE-2017-12615/CVE-2017-12616

    2017年9月19日,Apache Tomcat官方确认并修复了两个高危漏洞,漏洞CVE编号:CVE-2017-12615和CVE-2017-12616,该漏洞受影响版本为7.0-7.80之间,在一定 ...

  9. js如何使用正则表达式验证电话号码（可选区号）和邮箱？（分步骤）

    js如何使用正则表达式验证电话号码(可选区号)和邮箱?(分步骤) 一.总结 js进阶正则表达式16电话号码和邮箱正则(分类解决邮箱验证)(分组加?解决电话号码区号选择问题)([\w\.-]中括号解决邮 ...

  10. [Thu, 9 Jul 2015 ~ Tue, 14 Jul 2015] Deep Learning in arxiv

    这一期的神作论文有蛮多的,都很有意思. Feature Representation In ConvolutionalNeural Networks 该论文中论述了在某种CNN结构下,是否有准确率较高 ...