webpack使用教程 翻译自阮一峰(机翻)
原文https://github.com/ruanyf/webpack-demos#demo01-entry-file-source
這個倉庫集合了一些webpack簡單的demo。
這些demo風格簡單明了，你將發現跟著這些案例學習webacpk這個強大的工具變得不費吹灰之力。
如何使用
首先，在全局環境中安裝Webpack和webpack-dev-server
$ npm i -g webpack webpack-dev-server然后將倉庫克隆到本地并安裝相關依賴
# Linux & Mac$ git clone git@github.com:ruanyf/webpack-demos.git # Windows$ git clone https://github.com/ruanyf/webpack-demos.git : $ cd webpack-demos $ npm install現在，可以運行倉庫中所有demo目錄下的資源文件
$ cd demo01 $ webpack-dev-server用你的瀏覽器訪問 http://127.0.0.1:8080
前言：webpack是什么
webpack是一個前端構建系統類似于Grunt and Gulp.
它的功能有點類似于Browserify的模塊包，但是它可以做的更多。
它的配置文件是webpack.config.js
// webpack.config.js module.exports = {entry: './main.js',output: {filename: 'bundle.js'} };在有了webpack.config.js這個文件之后，你可以調用Webpack且不需要任何參數。
$ webpack一些你應該知道的命令行選項
- webpack– for building once for development(用于構建一個開發目錄)
- webpack -p– for building once for development(用于構建一個生產目錄(壓縮過的))
- webpack --watch– for continuous incremental build(用于連續地構建)
- webpack -d– to include source maps(展示映射關系)
- webpack --colors– for making things pretty(用于美化展示的信息)
To produce a production ready application(為了產生生產準備的應用)，你可以在package.json編寫以下scripts字段
// package.json {// ..."scripts": {"dev": "webpack-dev-server --devtool eval --progress --colors","deploy": "NODE_ENV=production webpack -p"},// ... }Index
Demo01:Entry file(入口文件) (資源)
Entry file(入口文件)將會被作為webpack讀取并構造出bundle.js.
舉例來說main.js就是一個(entry file)入口文件
index.html
<html><body><script type="text/javascript" src="bundle.js"></script></body> <html>webpack會根據webpack.config.js來構建出bundle.js
// webpack.config.js module.exports = {entry: './main.js',output: {filename: 'bundle.js'} };啟動服務器，訪問 http://127.0.0.1:8080 .
$ webpack-dev-server坑1
$ webpack-dev-server運行代碼出現以下錯誤意義不明
http://localhost:8080/webpack-dev-server/ webpack result is served from / content is served from C:\Users\umaru\demo\webpack-demos\demo01 Hash: 396f0bfb9d565b6f60f0 Version: webpack 1.14.0 Time: 44msERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./main.js in C:\Users\umaru\demo\webpack-demos\demo01 webpack: bundle is now VALID. $ webpack-dev-server $ webpack --display-error-details//帶上參數可以找出詳細的錯誤信息 Hash: 396f0bfb9d565b6f60f0 Version: webpack 1.14.0 Time: 31msERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./main.js in C:\Users\umaru\demo\webpack-demos\demo01 resolve directoryC:\Users\umaru\demo\webpack-demos\demo01\main.js is not a directory (directory default file)C:\Users\umaru\demo\webpack-demos\demo01\main.js\package.json doesn't exist (directory description file) resolve fileC:\Users\umaru\demo\webpack-demos\demo01\main.js.webpack.js doesn't existC:\Users\umaru\demo\webpack-demos\demo01\main.js.web.js doesn't existC:\Users\umaru\demo\webpack-demos\demo01\main.js.js doesn't existC:\Users\umaru\demo\webpack-demos\demo01\main.js.json doesn't existresolve result C:\Users\umaru\demo\webpack-demos\demo01\main.jsC:\Users\umaru\demo\webpack-demos\demo01\package.json (directory description file): SyntaxError: Unexpected token / in JSON at position 0原因是json解析錯誤在第0行有注釋json文件不認任何注釋
修改package.json
再運行
$ webpack-dev-server
沒有報錯
Demo02: Multiple entry files (多入口文件)(資源)
多入口文件是合法的，它通常被應用于一個多頁應用app
// 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'} };Demo03: Babel-loader(編譯器可以將es6語法轉成低版本[如es5語法]提高兼容性) (資源)
loaders(加載器)是可以轉換您的應用程序資源(更多信息)文件的一個預處理器，例如Babel-loader可以將JSX / ES6文件轉換為JS文件。官方文檔有一個完整的 loaders(加載器)列表
main.jsx是一個 JSX 文件.
const React = require('react'); const ReactDOM = require('react-dom');ReactDOM.render(<h1>Hello, world!</h1>,document.querySelector('#wrapper') );index.html
<html><body><div id="wrapper"></div><script src="bundle.js"></script></body> </html>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'},]} };在webpack.config.js中，module.loaders字段用于分配加載程序。 上面的代碼片段使用babel-loader，它還需要插件 babel-preset-es2015 和babel-preset-react對 ES6和React進行transpile(轉義)。 您也可以使用其他方式設置babel配置選項。
module: {loaders: [{test: /\.jsx?$/,exclude: /node_modules/,loader: 'babel',query: {presets: ['es2015', 'react']}}] }demo3 package.json
{"devDependencies": {"babel-core": "^6.21.0","babel-loader": "^6.2.10","babel-preset-es2015": "^6.18.0","babel-preset-react": "^6.16.0","react": "^15.4.2","react-dom": "^15.4.2"} }
作者：菲龍探雲
鏈接：https://www.jianshu.com/p/cd123afa196a
來源：簡書
總結
以上是生活随笔為你收集整理的webpack使用教程 翻译自阮一峰(机翻)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端模块管理器简介
- 下一篇： webpack入门--前端必备