webpacke的深刻淺出

時間 2019-11-19

標籤 webpacke 深刻简体版

原文原文鏈接

webpacke的深刻淺出

簡介

Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它能夠將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。

安裝

1.首先要安裝 Node.js， Node.js 自帶了軟件包管理器 npm，Webpack 須要 Node.js v0.6 以上支持.
2.用 npm 安裝 Webpack：
  $ npm install webpack -g 
  此時 Webpack 已經安裝到了全局環境下
  能夠經過命令行 webpack -h 檢查
一般咱們會將 Webpack 安裝到項目的依賴中，這樣就能夠使用項目本地版本的 Webpack。

實際操做一下

1.mkdir webpack-demo && cd webpack-demo（建立項目文件夾而且進入項目文件夾）

2.npm init -y（文件初始化會出現package.json文件）

3.npm install —save-dev webpack（安裝webpack）

4.如今在app的子目錄下建立一個index.js文件

function component () { var element = document.createElement('div'); /* 須要引入 lodash，下一行才能正常工做 */ element.innerHTML = _.join(['Hello','webpack'], ' '); return element; } document.body.appendChild(component());

5.要運行這段代碼，一般須要有如下 HTML

<html>
      <head>
        <title>webpack 2 demo</title>
        <script src="https://unpkg.com/lodash@4.16.6"></script>
      </head>
      <body>
            <script src="app/index.js"></script>
       </body>
</html>

6.因爲 index.js 並未顯式聲明須要引入 lodash因此咱們須要安裝 lodash

npm install --save lodash

7.import lodash(在index.js中添加如下代碼)

+ import _ from 'lodash'; function component () { ...

8.運行webpack打包生成單個js文件

在項目下打開命令行窗口須要輸入命令
webpack index.js bundle.js

9.此時更改index.html引入的js文件

<html>
  <head>
    <title>webpack 2 demo</title>
  </head>
  <body>
+   <script src="dist/bundle.js"></script>
  </body>
</html>

這就是簡單的webpacke的使用接下來學習使用帶有配置的 webpack

對於更復雜的配置，咱們能夠使用配置文件，webpack 會引用它來打包代碼。而後建立一個 webpack.config.js 文件。javascript

1.新建webpack.config.js文件

var path = require('path'); module.exports = { entry: './app/index.js',//輸入文件 output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist')//輸出文件 } };

2.安裝path

在指定文件夾下打開命令行窗口 npm install path --save-dev
path安裝完成

3.導出文件

命令行輸入：webpack便可

使用引入 npm 的 webpack

1.調整package.json文件

{
  ...
  "scripts": { "build": "webpack" }, ... }

2.在命令行窗口輸入

npm run build

相關標籤/搜索

每日一句

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