参考资料
js早期引入模块的方式
- script标签
- Require.js
- Common.js
启动服务器(by 朴灵)
npm install anywhere -g
anywhere
模块
- 模块由两部分组成：模块名与模块文件
- 模块可以来自node_modules目录，也可以来自任何文件(包括自定义)
- module: 定义模块的处理方式
- resolve.alias 定义模块的别名
webpack
- webpack不会做代码分析
- webpack.config.js文件依赖于node.js环境
- webpack负责对模块进行编译。这个所谓的编译过程实质上是webpack识别模块名，依据映射关系找到相应文件，放入某个特殊区域的过程。
- 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===>
发现package.json.main=react.js==>
在./lib目录下发现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, //===>改动文件后动态编译
entry: './index.js',//===>以context为参照，生成绝对路径；webpack会以entry指定文件为导入文件，用于导入各种资源文件
devtool: 'source-map',//===>开发者工具(资源映射表)，在调试时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的元素执行顺序是从右往左
}, {
//如果模块为图片文件
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
}
})
