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中数组如何使用

    js中数组如何使用 一.总结 一句话总结:new Array()和[]两种方法都可以创建数组. 二.js中创建数组,并往数组里添加元素 数组的创建 var arrayObj = new Array() ...

  2. vscode visual studio code svn 小乌龟 快捷键设置

    首先要安装svn小乌龟 然后安装vs code的svn插件TortoiseSVN for VS Code 文件->首选项->键盘快捷方式->搜索svn->找到相应命令然后设置快 ...

  3. Swift 语言概览 -自己在Xcode6 动手写2-tableView

    import UIKit class ViewController: UIViewController ,UITableViewDelegate, UITableViewDataSource { va ...

  4. Ditto —— windows 剪贴板增强小工具（复制粘贴多条记录）

    Windows 虽然不断在升级,但系统自带的剪贴板功能却仍然弱爆了 (只能保留一条记录). Ditto 下载地址:http://sourceforge.net/projects/ditto-cp/fi ...

  5. Bash Shell 的管道命令

    1.cut: 命令选取 cut -d'分隔字符' -f fields -d :后面接分隔字符.用-f一起使用 -f: 根据-d的分隔字符将一段信息分割成为数段 -c:以字符的单位取出固定字符区间 Eg ...

  6. poj 2955 Brackets 括号匹配 区间dp

    题意:最多有多少括号匹配 思路:区间dp,模板dp,区间合并. 对于a[j]来说: 刚開始的时候,转移方程为dp[i][j]=max(dp[i][j-1],dp[i][k-1]+dp[k][j-1]+ ...

  7. [CSS Flex] Flex direction

    flex-direction: main two 'row' or 'column', you can use reverse also.

  8. [Angular] ChangeDetection -- onPush

    To understand how change detection can help us improve the proference, we need to understand when it ...

  9. [NPM] Use custom config settings in your npm scripts

    In addition to package.json level variables (such as name and version), you can have custom conf set ...

  10. TensorFlow 学习（十三）—— tf.app.flags

    flags = tf.app.flags FLAGS = flags.FLAGS flags.DEFINE_integer('num_hidden_layers', 3, 'number of hid ...