參考資料
js早期引入模塊的方式
- script標(biāo)簽
- Require.js
- Common.js
啟動(dòng)服務(wù)器(by 樸靈)
npm install anywhere -g
anywhere
模塊
- 模塊由兩部分組成：模塊名與模塊文件
- 模塊可以來自node_modules目錄，也可以來自任何文件(包括自定義)
- module: 定義模塊的處理方式
- resolve.alias 定義模塊的別名
webpack
- webpack不會(huì)做代碼分析
- webpack.config.js文件依賴于node.js環(huán)境
- webpack負(fù)責(zé)對(duì)模塊進(jìn)行編譯。這個(gè)所謂的編譯過程實(shí)質(zhì)上是webpack識(shí)別模塊名，依據(jù)映射關(guān)系找到相應(yīng)文件，放入某個(gè)特殊區(qū)域的過程。
- entry: 定義整個(gè)編譯過程的起點(diǎn)
- entry中只能require(),不能import .. from xx;因?yàn)閣ebpack不會(huì)做代碼分析，只會(huì)識(shí)別模塊名。(信鴿不需要也不會(huì)查看信件，它的職責(zé)只是送信)
- output: 定義整個(gè)編譯過程的終點(diǎn)
about require
從node_modules中引入模塊
entry.js
const React = require('react');
webpack.config.js
module.exports = {
...
module: {
loaders:[
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react',
},
]
}
};
按照約定查詢邏輯:node_modules/react/package.json===>
發(fā)現(xiàn)package.json.main=react.js==>
在./lib目錄下發(fā)現(xiàn)react.js，它就是最終被webpack放入bundile.js的文件
其它文件中引入模塊
entry.js
require('./writrByme.css');
webpack.config.js
module.exports = {
...
module: {
loaders:[
{ test: /\.css$/, loader: 'style-loader!css-loader' },
]
}
};
直接在當(dāng)前目錄下找到writrByme.css，放入bundle.js
一個(gè)完整的webpack.config.js剖析
var webpack = require("webpack");
var DefinePlugin = require('webpack/lib/DefinePlugin');
//導(dǎo)出對(duì)象
module.exports = {
//webpack的編譯入口
context:process.cwd(),//===>webpack編譯的上下文
//process.cwd()是node.js的啟動(dòng)目錄
watch: true, //===>改動(dòng)文件后動(dòng)態(tài)編譯
entry: './index.js',//===>以context為參照，生成絕對(duì)路徑；webpack會(huì)以entry指定文件為導(dǎo)入文件，用于導(dǎo)入各種資源文件
devtool: 'source-map',//===>開發(fā)者工具(資源映射表)，在調(diào)試時(shí)Chrome將顯示編譯前的文件(更易讀)
output: {
path: path.resolve(process.cwd(),'dist/'),
filename: '[name].js'
},
//個(gè)性化配置;alias即type of(起別名)；
resolve: {
alias:{ jquery: process.cwd()+'/src/lib/jquery.js', }
//===>形成jquery模塊的映射機(jī)制(模塊名與模塊文件所在路徑)
},
//插件
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
_: 'underscore',
React: 'react'
}),
new DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development')
}
})
],
module: {
//加載方式
loaders: [{
//如果模塊為js文件
test: /\.js[x]?$/, //===> 正則表達(dá)式
exclude: /node_modules/, //===> node_modules目錄下的文件除外
loader: 'babel-loader' /* string(es6)<-->string(es7)*/
}, {
//如果模塊為less文件
test: /\.less$/,
loaders:['style-loader', 'css-loader','less-loader']//等價(jià)于loader:"less!css!style"
//loaders的元素執(zhí)行順序是從右往左
}, {
//如果模塊為圖片文件
test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg|swf)$/,
loader: "file-loader?name=[name]_[sha512:hash:base64:7].[ext]"
}, {
//如果模塊為html文件
test: /\.html/,
loader: "html-loader?" + JSON.stringify({minimize: false })
} ]
}
};
plugins
plugins在不同階段有不同行為
代碼壓縮混淆(jquery.js==>jquery.min.js)
new uglifyJsPlugin({
compress: {
warnings: false
}
})
