webpackjs合併,webpack代碼分割

本文目錄一覽：

• 1、webpack 合併的時候怎麼不處理第三方js，例如jquery
• 2、webpack打包原理
• 3、使用 webpack 打包 js
• 4、怎麼理解js所謂的打包
• 5、webpack打包Js文件
• 6、React | 使用webpack構建React項目

webpack 合併的時候怎麼不處理第三方js，例如jquery

var webpack = require(‘webpack’);

var ignoreFiles = new webpack.IgnorePlugin(/\.\/jquery-last.js$/);

module.exports = {

entry: ‘./main’,

output: {

path: __dirname,

filename: ‘bundle.js’

},

plugins: [ignoreFiles]

webpack打包原理

webpack打包原理是根據文件間的依賴關係對其進行靜態分析，然後將這些模塊按指定規則生成靜態資源，當 webpack 處理程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序需要的每個模塊，然後將所有這些模塊打包成一個或多個 bundle。

webpack有兩種組織模塊的依賴方式，同步、非同步。非同步依賴將作為分割點，形成一個新的塊；在優化了依賴樹之後，每一個非同步區塊都將作為一個文件被打包。

webpack有一個智能解析器，幾乎可以處理任何第三方庫。無論它們的模塊形式是CommonJS、AMD還是普通的JS文件；甚至在載入依賴的時候，允許使用動態表require(“、/templates/”+name+”、jade”)。

擴展資料

在使用webpack構建的典型應用程序或站點中，有三種主要的代碼類型：

1、團隊編寫的源碼。

2、源碼會依賴的任何第三方的library或”vendor”代碼。

3、webpack的runtime和manifest，管理所有模塊的交互。

runtime 包含：在模塊交互時，連接模塊所需的載入和解析邏輯；包括瀏覽器中的已載入模塊的連接，以及懶載入模塊的執行邏輯。

使用 webpack 打包 js

通過 命令行工具打包: webpack app.js bundle.js; 打包完成後會在同目錄下生成bundle.js.

app.js: 入口文件;

bundle.js: 打包好的文件。

通過amd規範定義的, 打包後會生成一個bundle.js 和 一個 1.bundle.js， 兩個bundle.js 文件

怎麼理解js所謂的打包

所謂打包就是將多個js文件合併，壓縮，為什麼需要打包呢，因為js合併之後可以減少前端js引用js的數量和體積，數量少了js載入就相對快一些。為什麼會說體積也減小了呢，因為現在流行的打包工具例如webpack在打包的過程中不只是簡單的把多個js文件合併成一個文件這麼簡單，它還會多js進行壓縮，例如去掉無效的空格，替換較長的變數名函數名等，最後讓你的js文件變得更小。

webpack打包Js文件

a .

注意點:index.js就是需要打包的文件打包之後的文件會放到dist目錄中, 名稱叫做main.js

b .

這句指令的含義是: 利用webpack將index.js和它依賴的模塊打包到一個文件中

其實在webpack指令中除了可以通過命令行的方式告訴webpack需要打包哪個文件以外,

還可以通過配置文件的方式告訴webpack需要打包哪個文件

這句指令的含義是將webpack將index.js和他依賴的模塊打包到一個文件中

其實webpack打包指令除了可以通知要打包哪些文件，還可以通過配置

2.2webpack常見配置

剛才是輸入npx webpack index.js 那麼現在就可以輸入npx webpack了

如果想要使用其他指令，可以直接修改的 package.json 的scirpts

以後再打包的時候，就可以直接使用npm run test了；

當然，還可以看下devtool的取值，他生成的sourcemap映射表，對打包後的包的大小和打包速度有很大影響

React | 使用webpack構建React項目

配置 React 項目，需要完成的工作：

1、編譯 jsx,es6,scss 等資源

2、自動引入靜態資源到 html 頁面

3、實時編譯和刷新瀏覽器

4、按指定模塊化規範自動包裝模塊

5、自動給 css 添加瀏覽器內核前綴

6、按需打包合併 js、css

根據 webpack 文檔編寫最基本的 webpack 配置，直接使用 node api 的方式

/* webpack.config.js */

var webpack= require( ‘webpack’ );

// 輔助函數  var utils= require( ‘./utils’ );

var fullPath=utils.fullPath;

var pickFiles=utils.pickFiles;

// 項目根路徑  var ROOT_PATH=fullPath( ‘../’ );

// 項目源碼路徑  var SRC_PATH=ROOT_PATH+ ‘/src’ ;

// 產出路徑  var DIST_PATH=ROOT_PATH+ ‘/dist’ ;

// 是否是開發環境  var __DEV__= process.env. NODE_ENV !== ‘production’ ;

// conf

var alias=pickFiles({

id :/(conf\/[^\/]+).js$/,

pattern :SRC_PATH+ ‘/conf/*.js’

});

// components

alias= Object.assign(alias,pickFiles({

id :/(components\/[^\/]+)/,

pattern :SRC_PATH+ ‘/components/*/index.js’

}));

// reducers

alias= Object.assign(alias,pickFiles({

id :/(reducers\/[^\/]+).js/,

pattern :SRC_PATH+ ‘/js/reducers/*’

}));

// actions

alias= Object.assign(alias,pickFiles({

id :/(actions\/[^\/]+).js/,

pattern :SRC_PATH+ ‘/js/actions/*’

}));

var config= {

context :SRC_PATH,

entry : {

app : [ ‘./pages/app.js’ ]

},

output : {

path :DIST_PATH,

filename : ‘js/bundle.js’

},

module : {},

resolve : {

alias :alias

},

plugins : [

new webpack.DefinePlugin({

//

“process.env.NODE_ENV” : JSON .stringify(process.env. NODE_ENV || ‘development’ )

})

]

};

module.

exports =config;

/* webpack.dev.js */

var webpack= require( ‘webpack’ );

var WebpackDevServer= require( ‘webpack-dev-server’ );

var config= require( ‘./webpack.config’ );

var utils= require( ‘./utils’ );

var PORT=8080;

var HOST=utils.getIP();

var args= process.argv;

var hot=args.indexOf( ‘–hot’ ) -1;

var deploy=args.indexOf( ‘–deploy’ ) -1;

// 本地環境靜態資源路徑  var localPublicPath= ‘http://’ +HOST+ ‘:’ +PORT+ ‘/’ ;

config.output. publicPath =localPublicPath;

config.entry.app.unshift( ‘webpack-dev-server/client?’ +localPublicPath);

new WebpackDevServer(webpack(config), {

hot :hot,

inline : true ,

compress : true ,

stats : {

chunks : false ,

children : false ,

colors : true

},

// Set this as true if you want to access dev server from arbitrary url.

// This is handy if you are using a html5 router.

historyApiFallback : true ,

}).listen(

PORT,HOST, function () {

console .log(localPublicPath);

});

編譯 jsx、es6、scss 等資源：

● 使用 bael 和 babel-loader 編譯 jsx、es6

● 安裝插件: babel-preset-es2015 用於解析 es6

● 安裝插件：babel-preset-react 用於解析 jsx

// 首先需要安裝 babel

$ npm i babel-core

// 安裝插件

$ npm i babel-preset-es2015babel-preset-react

// 安裝 loader

$ npm i babel-loader

在項目根目錄創建 .babelrc 文件:

{

“presets” : [ “es2015” , “react” ]

}

在 webpack.config.js 里添加：

// 使用緩存 var CACHE_PATH = ROOT_PATH + ‘/cache’ ;

// loaders

config.module. loaders = [];

// 使用 babel 編譯 jsx 、 es6

config.module. loaders .push({

test :/\.js$/,

exclude :/node_modules/,

include : SRC_PATH,

// 這裡使用  loaders ，因為後面還需要添加  loader

loaders : [ ‘babel?cacheDirectory=’ + CACHE_PATH ]

});

接下來使用 sass-loader 編譯 sass:

$ npm i sass-loader node-sasscss-loader style-loader

●css-loader 用於將 css 當做模塊一樣來 import

●style-loader 用於自動將 css 添加到頁面

在 webpack.config.js 里添加：

// 編譯  sass

config.module. loaders .push({

test :/\.(scss|css)$/,

loaders : [ ‘style’ , ‘css’ , ‘sass’ ]

});

自動引入靜態資源到相應 html 頁面

● 使用 html-webpack-plugin

$ npm i html-webpack-plugin

在 webpack.config.js 里添加：

// html  頁面  var HtmlwebpackPlugin= require( ‘html-webpack-plugin’ );

config.

plugins .push(

new HtmlwebpackPlugin({

filename : ‘index.html’ ,

chunks : [ ‘app’ ],

template : SRC_PATH + ‘/pages/app.html’

})

);

打包合併 js、css

webpack 默認將所有模塊都打包成一個 bundle，並提供了 Code Splitting 功能便於我們按需拆分。在這個例子里我們把框架和庫都拆分出來：

在 webpack.config.js 添加：

config.entry. lib = [

‘react’ , ‘react-dom’ , ‘react-router’ ,

‘redux’ , ‘react-redux’ , ‘redux-thunk’

]

config.output. filename = ‘js/[name].js’ ;

config.

plugins .push(

new webpack.optimize.CommonsChunkPlugin( ‘lib’ , ‘js/lib.js’ )

);

// 別忘了將  lib  添加到  html  頁面

// chunks: [‘app’, ‘lib’]