Webpack簡易入門教程

<!-- 其實網上關於webpack的教程已經不少了,可是本人在學習過程當中發現不少教程有錯誤,或者寫的很不全面,結果作的過程出現各類各樣的問題,對新手不但不友好還會讓人浪費不少沒必要要的時間。因此決定本身作個簡易教程,這個教程也沒有寫太深刻,面向的是純新手,但按這個教程你們能快速搭建本身的webpack,方便你們爲後面的學習作準備 -->

 github地址   https://github.com/Skura23/simple-webpack-test/tree/masterjavascript

項目結構

--your project
  |--prod
    |--components
      |--first.js
    |--index.js
  |--build
    |--index.html
    |--bundle.js

 

用npm安裝依賴

npm init ,填寫信息默認便可html

npm install react --save-dev   安裝reactjava

npm install react-dom --save-dev (或者 npm i react-dom)  安裝react-domnode

npm install webpack --save-dev  安裝webpackreact

npm install babel-loader --save-dev  安裝babelReact webpack

npm install jsx-loader --save-dev  安裝jsx-loader將JSX語法轉爲js語句git

建立webpack.config.js

var path=require('path');

module.exports={
    entry:path.resolve(__dirname,'./prod/index.js'),
    output:{
        path:path.resolve(__dirname,'./build'),
        filename:'bundle.js',
    },
    module: {
    loaders: [{ 
     test: /\.js$/,
     loader: 'babel!jsx', 
     exclude: /node_modules/ ,
     presets: ['es2015', 'react']
     }]
  }
}    

 

entry:指入口文件的配置項github

output:配置打包結果,path定義了輸出的文件夾,filename則定義了打包結果文件的名稱web

module:定義了對模塊的處理邏輯,這裏能夠用loaders定義了一系列的加載器,以及一些正則。當須要加載的文件匹配test的正則時,就會調用後面的loader對文件進行處理,這正是webpack強大的緣由。npm

 

接着配置index.js

var React = require('react');
var ReactDOM = require('react-dom');
var AppComponent = require('./components/first.js');
ReactDOM.render(<AppComponent />, document.getElementById('content'));

再配置first.js(這個是自定義組件)

var React = require('react');
var ReactDOM = require('react-dom'); var FirstComp = React.createClass({ render: function () { return ( <div className="firstComp"> Hello World! </div> ); } }); module.exports = FirstComp;

修改index.html以引入bundle.js,

bundle.js的生成位置在前面已經配置過了,因此咱們只要在index.html裏引入就能夠了

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>React Test</title>
</head>
<body>
  <div id="content"></div>
  <script src="bundle.js"></script>
</body>
</html>

 

配置package.json

打開package.json,並找到scripts代碼塊

修改scripts爲

"scripts": { "build": "webpack" }

而且執行:

npm run build

 

如今打開index.html,能夠看見Hello world,說明咱們使用webpack打包成功。

其實教程至此就完了,但後面你會發現每次更新文件後都要使用npm run build從新打包,費時費力,

接下來咱們使用webpack-dev-server將項目運行在虛擬服務器上,咱們能夠在package.json文件內定義scripts,同時修改webpack的配置文件來達到文件修改能被監聽,並自動刷新瀏覽器的效果!

 

配置webpack-dev-server

修改package.json爲

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

webpack-dev-server: 在 localhost:8080 創建一個 Web 服務器

--devtool eval:爲你的代碼建立源地址。

--progress: 顯示合併代碼進度

--colors: 在命令行中顯示顏色

--content-base build:指向設置的輸出目錄

 

而且在index.html里加入:

<script src="http://localhost:8080/webpack-dev-server.js"></script>

 

修改webpack.config.js : 

var path = require('path');

module.exports = {
  entry: ['webpack/hot/dev-server', path.resolve(__dirname, './prod/index.js')],
  output: {
    path: path.resolve(__dirname, './build'),
    filename: 'bundle.js',
  }
};

 

npm run dev

,打開http://localhost:8080,修改文件後保存,瀏覽器可自動刷新內容

 

github地址  https://github.com/Skura23/simple-webpack-test/tree/master

相關文章
相關標籤/搜索