初識webpack
ead>準備工作
在開始為項目加入構建前,需要先新建一個web項目,有如下方式: - 新建一個目錄,再進入項目根目錄執行npm init - 用腳手架工具Yeoman(http://yeoman.io)直接、快速地生成一個最符合自己的需求的項目
安裝webpack到本項目
安裝Webpack到本項目,可根據自己的需求選擇一下任意命令運行
npm i -D 是npm install --save-dev的簡寫,是指安裝模塊並保存到package.json的devDependencies
安裝最新的穩定版 npm i -D webpack
安裝最新的體驗版本 npm i -D webpack@beta
安裝webpack到全局
npm i -g webpack
推薦使用這種方式安裝,防止不同的項目因依賴不同版本的Webpack而導致衝突
簡單實戰
- npm install webpack --save--dev(建議使用yarn add webpack 來進行安裝)
- npm init(創建一個package.json文件,本次使用yarn init)
- 在package.json文件中配置打包命令 "scripts": { "start": "webpack --config webpack.config.js" },
- 搭建項目目錄,如下
項目目錄 - index.html - main.js - show.js - webpack.config.js
index.html
```
```
main.js
// 通過commonjs規範導入show函數
const show = require('./show.js');
show('Webpack');
show.js
``` // 操作DOM元素,將content顯示到頁面上 function show(content){ window.document.getElementById('app').innerHTML('hello'+content) }
module.exports = show; ```
webpack.config.js
``` const path = require('path');
module.exports = { // JavaScript執行入口文件 entry: './main.js', output:{ // 將所有依賴的模塊合併輸出到一個bundle.js文件 filename: 'bundle.js', // 將輸出文件都放到dist目錄下 path: path.resolve(__dirname, './dist'), } } ```
開始執行
npm run start
最終在目錄下生成一個dist目錄,目錄下生成了一個bundle.js文件,bundle.js是一個可執行的javascript文件,它包含頁面所依賴的兩個模塊main.js、show.js,以及內置的webpackBootstrap啟動函數。這時用瀏覽器打開index.html網頁,將會看到Hello Webpack
總結
本章只是簡單的介紹了下webpack的簡單使用,通過本章應該記住如何去構建一個webpack環境。接下來一章我會介紹如何使用Loader、使用Plugin、使用DevServer
本文作者:自如大前端研發中心-馮騰飛