Note ---- About Webpack

時間 2019-11-14

標籤 note webpack 简体版

原文原文鏈接

1.新建webpack文件夾javascript

2.npm init 生成 package.jsoncss

3.局部安裝
npm install --save-dev webpack
全局安裝
npm install -g webpackhtml

4.入口文件java

app.jswebpack

var greeter = require('./cats.js'); 
greeter();

cat.jsgit

// cat.js 
module.exports = function() { 
document.getElementById('contain').innerHTML="Hello World"; 
};

index.htmlgithub

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Webpack Sample Project</title> 
</head> 
<body> 
<div id='contain'> 
</div> 
<script src="dist/bundle.js"></script> 
</body> 
</html>

5.配置webpack
新建項目配置 web

webpack.config.jsnpm

module.exports = { 
entry: './src/app.js', 
output: { 
path: './dist', 
filename: 'bundle.js' 
} 
};

6.執行命令 webpack
便可在根目錄下生成一個dist文件夾中bundle.jsjson

項目結構

entry 是頁面中的入口文件，好比我這邊的入口文件時main.js
output: 是指頁面經過webpack打包後生成的目標文件放在什麼地方去，我這邊是在根目錄下生成build文件夾，該文件夾內有一個build.js文件；
resolve: 定義瞭解析模塊路徑時的配置，經常使用的就是extensions; 能夠用來指定模塊的後綴，這樣在引入模塊時就不須要寫後綴，會自動補全。
plugins: 定義了須要使用的插件，好比commonsPlugin在打包多個入口文件時會提取公用的部分，生成common.js;module.loaders：是文件的加載器，好比咱們以前React須要在頁面中引入jsx的js源碼到頁面上來，而後使用該語法，可是經過webpack打包後就不須要再引入JSXTransformer.js；看到上面的加載器；好比jsx-loader加載器就是表明JSXTransformer.js的，還有style-loader和css-loader加載器；所以在使用以前咱們須要經過命令把它引入到項目上來；

關於加載器
jsx-loader加載器 jsx文件
npm install jsx-loader --save-dev

Style-loader加載器加載css文件
npm install style-loader --save-dev

css-loader 加載器加載css文件
npm install css-loader --save-dev

less-loader加載器將less編譯成css文件
npm install less-loader --save-dev

url-loader加載器 js中加載png/jpg格式的圖片文件
npm install less-loader --save-dev

也能夠一塊兒寫
npm install css-loader less-loader style-loader --save-dev

關於webpack命令
webpack // 最基本的啓動webpack的方法
webpack -w // 提供watch方法；實時進行打包更新
webpack -p // 對打包後的文件進行壓縮
webpack -d // 提供source map，方便調式代碼

項目下載
https://github.com/MMMsCheng/webpackCourse

蟹蟹http://www.cnblogs.com/tugenhua0707/p/4793265.html