webpack開發指南1

時間 2019-12-09

標籤 webpack 開發指南简体版

原文原文鏈接

怎麼安裝Webpack

安裝node.js

首先須要安裝Node.js，node自帶了包管理工具npm。javascript

安裝webpack

使用npm install webpack -g，webpack全局安裝到了本地環境中，就可使用webpack命令了。css

在項目中使用webpack

經過npm init實例化package.json文件。
經過npm install webpack --save-dev安裝webpack到package.json文件中。
或者經過npm install webpack@1.2.x --save-dev安裝指定版本的webpack到package.json文件中。
經過npm install webpack-dev-server --save-dev安裝dev tools到package.json文件中，本地運行webpack服務。

怎麼使用Webpack

一、安裝webpack後，可使用webpack這個命令行工具。主要命令：webpack <entry> <output>。能夠切換到包含webpack.config.js的目錄運行命令：html

webpack 執行一次開發時的編譯
webpack -p 執行一次生成環境的編譯（壓縮）
webpack --watch 在開發時持續監控增量編譯（很快）
webpack -d 讓他生成SourceMaps
webpack --progress 顯示編譯進度
webpack --colors 顯示靜態資源的顏色
webpack --sort-modules-by, --sort-chunks-by, --sort-assets-by 將modules/chunks/assets進行列表排序
webpack --display-chunks 展現編譯後的分塊
webpack --display-reasons 顯示更多引用模塊緣由
webapck --display-error-details 顯示更多報錯信息

二、每一個項目下都必須配置有一個 webpack.config.js，它的做用如同常規的 gulpfile.js/Gruntfile.js ，就是一個配置項，告訴 webpack 它須要作什麼。java

一、第一個項目demo01，首先建一個文件夾demo01，下面包含一個index.html,main.js,webpack.config.jsnode

index.htmlreact

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>

　　main.jsjquery

document.write('welcome to webpack world!!')

webpack.config.jswebpack

module.exports ={
    entry:'./main',        //這個表示的程序執行的入口，
    output:{
        filename:'bundle.js'//這個表示的程序的出口。
    }
}

　　而後咱們運行命令webpack-dev-server,在去訪問localhost:8080就能夠看到'welcome to webpack world!'這句話，總體是將main.js文件打包成bundle.js文件，而後在main.js文件中引用bundle.jsweb

二、demo02中含有一個index.html,main1.js,main2.js ,bundle2.js,webpack.config.jsnpm

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script src="bundle2.js" type="text/javascript"></script>
</body>
</html>

main1.js

function creatObj(){
    var div1 = document.createElement('div');
    div1.innerHTML = 'this is a create div!'
    return div1;
}

module.exports = creatObj

main2.js

var main1 = require('./main1.js');
document.write(main1().innerHTML);

webpack.config.js

module.exports = {
    entry:{
     bundle2:'./main1.js',
     bundle2:'./main2.js'
    },
    output:{
        filename:'bundle2.js'
    }

}

demo03

// main1.js
document.write('<h1>Hello World</h1>');

// main2.js
document.write('<h2>Hello Webpack</h2>');

index.html

<html>
  <body>
    <script src="bundle1.js"></script>
    <script src="bundle2.js"></script>
  </body>
</html>

webpack.config.js

module.exports = {
  entry: {
    bundle1: './main1.js',
    bundle2: './main2.js'
  },
  output: {
    filename: '[name].js'
  }
};

demo04

安裝jsx解析器

首先這個文件中包含index.html , main.jsx ,webpack.config.js

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="wrapper"></div>
<script src="bundle.js" type="text/javascript"></script>
</body>
</html>

main.jsx

const React = require('react');
const ReactDOM = require('react-dom');

ReactDOM.render(
    <h1>Hello, world,hello webpack!</h1>,
    document.querySelector('#wrapper')
);

webpack.config.js

module.exports = {
    entry:'./main.jsx',
    output:{
        filename:'bundle.js'
    },
    module: {
        loaders:[
            {
                test: /\.js[x]?$/,
                exclude: /node_modules/,
                loader: 'babel-loader?presets[]=es2015&presets[]=react'
            },
        ]
    }
}

這一個模塊要好好說說，首先若是要使用react 的話能夠在那個jsx文件中引入react，react-dom模塊。其次要解析jsx文件必須須要jsx解析器babel，要下相應的babel-loader，jsx-loader，babel-core，babel-preset-es2015，babel-preset-react

因此在使用jsx文件和運用react.js開發組件以前，要先加載一下幾個文件

npm install react react-dom babel-loader jsx-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

而後再webpack.config.js文件中加入

module: { loaders:[ { test: /\.js[x]?$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }, ] }

demo05(webpack中容許你將css文件當一個模塊加載到js文件中，可是在這以前你必須安裝css-loader,style-loader)

npm install css-loader style-loader --save-dev

而後在webpack.config.js中loaders中加入

 { test: /\.css$/, loader: 'style-loader!css-loader' }

就能夠了

demo05中結合第四個項目：index.html ,main.css ,compont_first.js ,webpack.config.js

indx.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="main"></div>
<script src="bundle.js" type="text/javascript"></script>
</body>
</html>

main.css

.div1{
    width:500px;
    height:500px;
    background-color:blue;

}

compont_first.js

 var React = require('react'); var ReactDOM = require('react-dom') var Main = require('./main.css');
var FirstComponent =React.createClass({

    render:function(){
        return <div className='div1'>這個用react創造出來的div</div>
    }
});

module.exports= FirstComponent;

main.js

var FirstComponent = require('./compont_first'); var React = require('react');
var ReactDOM = require('react-dom')
ReactDOM.render(<FirstComponent/>,document.getElementById('main'))//這一句話的使用要使用react-dom模塊

webpack.config.js

module.exports ={
    entry:'./main.js',
    output:{
        filename:'bundle.js'
    },
    module: {
        loaders:[
            {
                test: /\.js[x]?$/,
                exclude: /node_modules/,
                loader: 'babel-loader?presets[]=es2015&presets[]=react'
            },
            { test: /\.css$/, loader: 'style-loader!css-loader' }
        ]
    }
}

總體就是這樣的.

demo06(關於圖片loader，若是想將圖片直接require進去到js文件中去，必須先加載url-loader）

npm install url-loader --save-dev

而後再webpack.config.js文件中添加

 { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }

demo06文件中含img文件夾(文件夾下面放了1.jpg)，index.html ,compont_first.js ,main.js main.css ,webpack.config.js

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="main"></div>
<script src="bundle.js" type="text/javascript"></script>
</body>
</html>

compont_first.js

 var React = require('react');
var ReactDOM = require('react-dom')
var Main = require('./main.css');
var img = require('./img/1.jpg');//將圖片加載進來
var FirstComponent =React.createClass({

    render:function(){
        return <div className='div1'>
        <img src={img}/>
        </div>
    }
});

module.exports= FirstComponent;

main.css

.div1{
    width:500px;
    height:500px;
}

.div1 img {
    width:400px;
}

main.js

var FirstComponent = require('./compont_first');
var React = require('react');
var ReactDOM = require('react-dom')
ReactDOM.render(<FirstComponent/>,document.getElementById('main'))

webpack.config.js

module.exports ={
    entry:'./main.js',
    output:{
        filename:'bundle.js'
    },
    module: {
        loaders:[
            {
                test: /\.js[x]?$/,
                exclude: /node_modules/,
                loader: 'babel-loader?presets[]=es2015&presets[]=react'
            },
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }//增長的部分
        ]
    }
}

全局css樣式和module內css樣式

demo07中包含一個index.html , main.js ,main.css ,webpack.config.js

什麼叫全局css樣式？什麼叫module內css樣式？

全局css樣式就是指的是該樣式在工程任何地方均可以用(前提要引進來了)

module內的css樣式表示的是隻有在引入這個css模塊的文件中使用，有效

具體解釋看下面

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1 class="h1">Hello World</h1>//這裏也添加了兩個元素
<h2 class="h2">Hello Webpack</h2>
<div id="div1"></div>
<script src="bundle.js" type="text/javascript"></script>
</body>
</html>

main.css

.h1{
    color:blue;
} :global(.h2) {          //這裏要注意
    color: green;
}

main.js

var React = require('react');
var ReactDOM = require('react-dom');
var Main = require('./main.css')
var First_Compont =React.createClass({
    render:function(){
        return <div>
            <h1 className={Main.h1}>blue!!</h1>
            <h2 className ='h2'>green!!</h2>         
            </div>
    }
});

ReactDOM.render(<First_Compont/>,document.getElementById('div1'))

webpack.config.js

module.exports ={
    entry:'./main.js',
    output:{
        filename:'bundle.js'
    },
    module: {
        loaders:[
            {
                test: /\.js[x]?$/,
                exclude: /node_modules/,
                loader: 'babel-loader?presets[]=es2015&presets[]=react'
            },
            { test: /\.css$/, loader: 'style-loader!css-loader?modules' },//注意在這後面加上了?modules
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
        ]
    }
}

首先，咱們要在module中的css-loader後面加上?modules ,其次若是要想讓某個css樣式變成全局的話，就要:global(.h2){...} 使用，而後使用這個樣式時，直接

className='h2'(react中)或者class ='h2'(index.html中),若是在react中這樣使用(className={Main.h2})將不生效，由於這個樣式不是Main這個模塊中的了(可是因爲main.css被加載到main.js,而後被編譯到bundle.js中，最後被引入到index.html中,因此在index.html可使用。

其次，在main.css中.h1{..}沒有將他變爲全局的，因此只能在直接引入他的文件中使用（main.js)不能再index.html中使用。

webpack中的插件系統，如何在webpack中使用插件方法，首先加載這個插件，其次在webpack.config.js中加上下面這句話

plugins: [
    這裏面放插件信息
  ]

首先壓縮插件

因爲壓縮插件在webpack中就有，因此

webpack.config.js

var webpack = require('webpack');//首先引入webpack
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;//其次加載插件
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new uglifyJsPlugin({     //插件聲明
      compress: {
        warnings: false
      }
    })
  ]
}

還有一個建立html和自動打開browser的插件，這個時候不須要寫index.html文件了

main.js

document.write('<h1>Hello World</h1>');

　　webpack.config.js

var HtmlwebpackPlugin = require('html-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Webpack-demos',
      filename: 'index.html'
    }),
    new OpenBrowserPlugin({
      url: 'http://localhost:8080'
    })
  ]
};

　　這個地方要先加載兩個插件

npm install html-webpack-plugin --save-dev

npm install open-browser-webpack-plugin --save-dev

plugins: [
  new HtmlwebpackPlugin({
    title: 'Webpack-demos',
    filename: 'index.html'
}),
  new OpenBrowserPlugin({
    url: 'http://localhost:8080'
})
]



demo12 提取公共的部分到某一個js中（init.js)
首先看下面代碼
index.html

<html>
  <body>
    <div id="a"></div>
    <div id="b"></div>
    <script src="init.js"></script>
    <script src="bundle1.js"></script>
    <script src="bundle2.js"></script>
  </body>
</html>

main1.js

var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
  <h1>Hello World</h1>,
  document.getElementById('a')
);

main2.js

var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
  <h2>Hello Webpack</h2>,
  document.getElementById('b')
);

webpack.config.js

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
  entry: {
    bundle1: './main1.jsx',
    bundle2: './main2.jsx'
  },
  output: {
    filename: '[name].js'
  },
  module: {
    loaders:[
      { test: /\.js[x]?$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' },
    ]
  },
  plugins: [
    new CommonsChunkPlugin('init.js')
  ]
}

這時候主要引入的是一個插件CommonsChunkPlugin這個插件。

demo13如何在程序中運用jquery呢？

首先要先加載jquery(npm install jquery --save-dev)

其次在須要使用的js文件中require進來

index.html

<html>
  <body>
    <h1></h1>
     <script src="bundle.js"></script>
  </body>
</html>

main.js

var $ = require('jquery');
$('h1').text('Hello World');

webpack.config.js

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

第一步加載jquery程序，第二步在要使用的js文件中引用（main.js）中，這樣就能夠了。

如何一次性加載，而後不須要在每一個須要使用jquery的js文件中都引用jquery？？？？？

只須要要改一下webpack.config.js文件

webpack.config.js

var webpack = require('webpack');

module.exports = {
  entry: {
    app: './main.js'
  },
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" }) ]
};

只須要引入jquery插件，而後在裏面命名一下就好

 new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })

這樣在全部的js文件中就不須要在頭部引入，能夠直接使用( $('h1')或者jQuery（'h1')或者window.jQuery('h1'))。

如何定義全局變量.

demo15

index.html

<html>
  <body>
    <script src="data.js"></script>   //這裏面也要引入進來
    <script src="bundle.js"></script>
  </body>
</html>

data.js

var data = 'Hello World hello webbapck';

main.jsx

var data = require('data');   //引入data
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>{data}</h1>,
  document.body
);

webpack.config.js

module.exports = {
  entry: './main.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      { test: /\.js[x]?$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' },
    ]
  },
  externals: {      //將data設置爲全局變量
    'data': 'data'
  }
};

var data = require('data');
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>{data}</h1>,
  document.body);

相關標籤/搜索

每日一句

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