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，需要导入一个对象。

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

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

<!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编译正确：

$ 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标记：

$ 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/54177581

操作步骤：

1、安装完Node之后，为了保证速度，需要使用淘宝镜像，命令如下：

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

（2）npm config list  可以查看配置

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

(1)npm install webpack -g  

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

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

  1. npm init 自定义创建package.json  
  2. npm init -yes 可以创建默认的package.json

现在我们的项目已经创建好了,接下来我们来添加依赖包及插件

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

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()
    ]
};

安装完成之后运行命令

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

npm run build         线上目录

npm run dev           开发目

2.浏览器直接访问:

http://localhost:8099/index.html

附上项目结构

posted on 2017-09-28 14:09 水行者阅读(541) 评论(0) 编辑收藏举报

刷新页面返回顶部

水行者

webpack 环境搭建+实现热更新

操作步骤：

导航