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. sublime课程3 emmet插件中的常用符号有哪些

    sublime课程3 emmet插件中的常用符号有哪些 一.总结 一句话总结:emmet插件中的符号和css选择器里面哪些符号的意思很像. 1.+是干嘛的? 组合 2.{}是干嘛的? 标签里面的inn ...

  2. sed学习总结

    sed学习总结 sed工作流 测试文件:cat employee.txt 101,John Doe,CEO 102,Jason Smith,IT Manager 103,Raj Reddy,Sysad ...

  3. 【Lucene4.8教程之二】索引 2014-06-16 11:30 3845人阅读 评论(0) 收藏

    一.基础内容 0.官方文档说明 (1)org.apache.lucene.index provides two primary classes: IndexWriter, which creates ...

  4. 利用函数的惰性载入提高 javascript 代码性能

    在 javascript 代码中,因为各浏览器之间的行为的差异,我们经常会在函数中包含了大量的 if 语句,以检查浏览器特性,解决不同浏览器的兼容问题.例如,我们最常见的为 dom 节点添加事件的函数 ...

  5. android的edittext设置输入限制,只能输入数字

    EditText的属性里面已经封装好了相关的设置,上一篇文章里面也提到了,不熟悉的可以去查看上一篇EditText属性大全,这里着重讲输入限制的属性: android:digits="123 ...

  6. maven打包到本地库

    mvn install:install-file -DgroupId=com.alipay -DartifactId=com.alipay.core -Dversion=20180104135026 ...

  7. 体验ArcGIS9.2的历史库功能

    转自原文 体验ArcGIS9.2的历史库功能 ESRI公司于2006年11月9日全球同步发布了历史上重要的软件版本ArcGIS9.2,在该版本中,主要新增了以下四大功能(ESRI田昌莲): 第一大新功 ...

  8. js实现计时功能

    原文链接:https://blog.csdn.net/qq_37936542/article/details/78912786 一:计时器功能 <!DOCTYPE html> <ht ...

  9. SetProcessWorkingSetSize() 方法使内存降低了很多（把内存放到交换区，其实会降低性能）——打开后长时间不使用软件，会有很长时间的加载过程，原来是这个！

    在项目中对程序性能优化时,发现用SetProcessWorkingSetSize() 方法使内存降低了很多,于是查阅了相关的资料如下: 我的程序为什么能够将占用的内存移至虚拟内存呢? 其实,你也可以, ...

  10. C# 关于反射事件

    在frmMain类中的代码 private void StartRun(string tag, string date, bool tipType)        {            var d ...