webpack 环境搭建+实现热更新

时间 2019-11-18

标签 webpack 环境搭建实现更新繁體版

原文原文链接

让咱们一块儿构建一个小的app

为了便于你更好的了解Webpack带来的好处，咱们将会构建一个很是小的app并将资源文件打包。在这个教程中我推荐基于Node4或Node5和NPM3来进行开发，这样就避免在使用Webpack工做的过程当中出现一系列头疼的问题。若是你使用的不是NPM3,你能够经过 npm install npm@3 -g 命令来安装它。

$ node --version
v5.7.1
$ npm --version
3.6.0

基础的引导

让咱们开始建立咱们的项目并安装Webpack，咱们也会拉取jQuery稍后作展现用。

$ npm init -y
$ npm install jquery --save
$ npm install webpack --save-dev

如今让咱们建立app的入口文件，用ES5的语法：

src/index.js

var $ = require('jquery');
$('body').html('Hello');

而后在webpac.config.js文件中建立Webpack配置。Webpack配置就是Javascript，须要导入一个对象。javascript

module.exports = {
    entry: './src',
    output: {
        path: 'builds',
        filename: 'bundle.js',
    },
};

entry 告诉Webpack在你的应用中哪些文件是入口文件。这些就是最主要的文件，位于依赖树的最上层。而后咱们告诉它编译的打包文件放到builds文件夹下而且命名为bundle.js。让咱们来设置相应的index.html页面：css

<!DOCTYPE html>
<html>
 <head></head>
 <body> 
  <h1>My title</h1> 
  <a>Click me</a> 
  <script src="builds/bundle.js"></script>  
 </body>
</html>

咱们来运行Webpack命令，咱们获得了一些信息，它告诉咱们bundle.js编译正确：html

$ webpack
Hash: d41fc61f5b9d72c13744
Version: webpack 1.12.14
Time: 301ms
    Asset    Size  Chunks             Chunk Names
bundle.js  268 kB       0  [emitted]  main
   [0] ./src/index.js 53 bytes {0} [built]
    + 1 hidden modules

这里你能够看到Webpack告诉你bundle.js包含了你的入口文件(index.js)以及有一个隐藏模块。这个隐藏模块就是jQuery,Webpack默认隐藏不是你的模块。为了查看全部被Webpack编译以后隐藏的模块，咱们能够加上 --display-modules标记：java

$ webpack --display-modules
bundle.js  268 kB       0  [emitted]  main
   [0] ./src/index.js 53 bytes {0} [built]
   [1] ./~/jquery/dist/jquery.js 259 kB {0} [built]

热更新---------------->这里我走了不少弯路，感谢网友的解决方案，访问路径：http://blog.csdn.net/qq_16559905/article/details/54177581node

操做步骤：

一、安装完Node以后，为了保证速度，须要使用淘宝镜像，命令以下：react

（1）npm config set registry "http://registry.npm.taobao.org"  

（2）npm config list  能够查看配置

2.安装完nodejs以后,打开终端,执行命令:jquery

(1)npm install webpack -g  

//-g的意思是安装全局的webpack,可是咱们实际的开发中还须要针对单个的项目进行webpack安装,执行命令:

三、使用 npm init 初始化，生成 package.json 文件：执行命令:webpack

  1. npm init 自定义建立package.json  
  2. npm init -yes 能够建立默认的package.json

如今咱们的项目已经建立好了,接下来咱们来添加依赖包及插件web

（1）局部安装Webpack,执行命令：npm

npm install webpack --save-dev

（2）安装React,–save 命令用于将包添加至 package.json 文件,执行命令：

npm install  react react-dom react-router react-hot-loader css-loader  jsx-loader html-webpack-plugin --save-dev

（3）安装babel插件,babel插件是webpack须要的加载器,若是没有这几个加载器咱们的jsx语法，和es2015语法就会报错。

npm install babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-0 --save-dev

（4）安装自动刷新热更新服务，安装webpack-dev-server执行命令：

npm install webpack-dev-server --save-dev

（5）在package.json文件中为scripts添加,方便使用开启服务命令:

"scripts": {  
    "build": "webpack",  
    "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"  
}

package.json所有文件附上：

{
  "name": "tdip",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-loader": "^7.1.2",
    "jquery": "^3.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.7",
    "html-webpack-plugin": "^2.30.1",
    "jsx-loader": "^0.13.2",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-hot-loader": "^1.3.1",
    "react-router": "^4.2.0",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

安装完命令以后，建立webpack的配置文件：webpack.config.js文件

webpack.config.js文件配置以下：

// module.exports = {
//     entry: __dirname + '/src',
//     output: {
//         path: __dirname + '/builds',
//         filename: 'bundle.js',
//     },
// };

var path = require('path'),
    webpack = require('webpack'),
    HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: ['webpack/hot/dev-server', __dirname + '/src'],
    output: {
        path: __dirname + '/builds',
        filename: 'bundle.js'
    },
    devServer: {
        inline: true,
        port: 8099
    },
    module: {
        loaders: [{
            test: /\.js?$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react']
            }

        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
        new webpack.HotModuleReplacementPlugin()
    ]
};

安装完成以后运行命令

一、根目录下执行命令,其中一个：

npm run build 线上目录 npm run dev 开发目

2.浏览器直接访问:

http://localhost:8099/index.html

附上项目结构