參考資料
js早期引入模塊的方式
- script標簽
- Require.js
- Common.js
啟動服務器(by 樸靈)
npm install anywhere -g
anywhere
模塊
- 模塊由兩部分組成：模塊名與模塊文件
- 模塊可以來自node_modules目錄，也可以來自任何文件(包括自定義)
- module: 定義模塊的處理方式
- resolve.alias 定義模塊的別名
webpack
- webpack不會做代碼分析
- webpack.config.js文件依賴于node.js環(huán)境
- webpack負責對模塊進行編譯楞泼。這個所謂的編譯過程實質(zhì)上是webpack識別模塊名糖埋，依據(jù)映射關系找到相應文件召嘶，放入某個特殊區(qū)域的過程潜秋。
- entry: 定義整個編譯過程的起點
- entry中只能require(),不能import .. from xx;因為webpack不會做代碼分析圆存，只會識別模塊名泪掀。(信鴿不需要也不會查看信件摆寄，它的職責只是送信)
- output: 定義整個編譯過程的終點
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' },
]
}
};
直接在當前目錄下找到writrByme.css军浆，放入bundle.js
一個完整的webpack.config.js剖析
var webpack = require("webpack");
var DefinePlugin = require('webpack/lib/DefinePlugin');
//導出對象
module.exports = {
//webpack的編譯入口
context:process.cwd(),//===>webpack編譯的上下文
//process.cwd()是node.js的啟動目錄
watch: true, //===>改動文件后動態(tài)編譯
entry: './index.js',//===>以context為參照，生成絕對路徑挡闰；webpack會以entry指定文件為導入文件乒融，用于導入各種資源文件
devtool: 'source-map',//===>開發(fā)者工具(資源映射表)掰盘，在調(diào)試時Chrome將顯示編譯前的文件(更易讀)
output: {
path: path.resolve(process.cwd(),'dist/'),
filename: '[name].js'
},
//個性化配置;alias即type of(起別名)；
resolve: {
alias:{ jquery: process.cwd()+'/src/lib/jquery.js', }
//===>形成jquery模塊的映射機制(模塊名與模塊文件所在路徑)
},
//插件
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
_: 'underscore',
React: 'react'
}),
new DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development')
}
})
],
module: {
//加載方式
loaders: [{
//如果模塊為js文件
test: /\.js[x]?$/, //===> 正則表達式
exclude: /node_modules/, //===> node_modules目錄下的文件除外
loader: 'babel-loader' /* string(es6)<-->string(es7)*/
}, {
//如果模塊為less文件
test: /\.less$/,
loaders:['style-loader', 'css-loader','less-loader']//等價于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
}
})
