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. poj 2955 Brackets 括号匹配 区间dp

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

  2. ArcGIS Engine 编辑- ITask

    转自原文ArcGIS Engine 编辑- ITask 下面的代码是我们定制的一个工作流-给等高线赋值 namespace EngineApplication { [Guid("5b0c06 ...

  3. RSA解密时javax.crypto.BadPaddingException: Data must start with zero

    解决方法:要在加密后产生的byte数组转成string时要在各byte之间加个标识符,我加了个空格,然后再根据空格分隔转换回byte数组.如果不加标识符,由于byte值可能是一位到三位,无法知道某一个 ...

  4. android WebView总 结

    浏览器控件是每个开发环境都具备的,这为马甲神功提供了用武之地,windows的有webbrowser,android和ios都有webview.只是其引擎不同,相对于微软的webbrowser,and ...

  5. Distribution download cancelled. Using distribution from 'https://services.gradle.org/distributions/

    Distribution download cancelled. Using distribution from ‘https://services.gradle.org/distributions/ ...

  6. Web开发标配--开发人员工具-F12

    喜欢从业的专注,七分学习的态度. 360浏览器-开发工具 谷歌-开发工具 IE-开发工具 Web开发中最最烦琐的莫过于调整CSS和JS,而最方便最高效的方式就是利用浏览器的开发工具调整.CSS可以实时 ...

  7. 实际工程Quartz与Spring设计与实现一体化的热部署

    1.需求说明 主要负责项目任务调度.使用Quartz.以Spring为辅助. 如今有这样一个需求:我们不知道管理员想设定过多厂时间运行主任务,须要在配置文件定义.在配置好后须要马上运行.实现热部署. ...

  8. 行列式（determinant）的物理意义及性质

    1. 物理(几何)意义 detA=output areainput area 首选,矩阵代表的是线性变换(linear transformation).上式说明一个矩阵的行列式(detA)几何意义上, ...

  9. boost::any在降低模块之间耦合性的应用

    作者:朱金灿 来源:http://blog.csdn.net/clever101 在开发大型系统中,遵循这样一个原则:模块之间低耦合,模块内高内聚.比如系统中模块有界面模块和算法模块两种,一般是界面模 ...

  10. 空间同构（isomorphic）

    1. introduction 对于一个 M22 矩阵空间,其 dimM22=4,基的构成如下: {(1000)(0010)(0100)(0001)} 则:M22≅R4 对于 P3 多项式空间,也即: ...