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

附上項目結構

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。