Webpack 本身只能处理 JavaScript 模块,基础的webpack大概分为entry,output,moudle,plugins,具体为
1 |
|
项目中引用atool-build后webpack的基本功能都可以实现，如果想对其进行扩展，可写在
webpack.config.js中。atool-build的webpack配置getWebpackCommonConfig.js
跟webpack分不开的package.json。当安装各种npm 依赖包的时候会有两种写法:
-save和save-dev可以省掉你手动修改package.json文件的步骤。
npm install module-name -save 自动把模块和版本号添加到dependencies部分
npm install module-name -save-dve 自动把模块和版本号添加到devdependencies部分
至于配置文件区分这俩部分， 是用于区别开发依赖模块和产品依赖模块
entry中填入需要打包的js 文件，可指定多个文件.
1 |
|
__dirname 是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
output中是打包后输出的js文件，也是主页面中所依赖的js文件。
1 |
|
resolve 省略后缀,当引入js的时候可省略，，import react from ‘react’;
1 |
|
module 加载器配置，因为webpack 本身只支持对js进行处理。对其他文件进行处理就在加载器中进行配置
1 |
|
test正则匹配文件后缀，比如｀test: /.scss$/｀，如果匹配到文件后缀时scss，就用｀loader｀里面的加载器进行处理。｀style!css!scss｀这种写法是对运用多个加载器时的简写，对应｀’style-loader’,’scss-loader’,,顺序是从右到左依次用加载器进行处理。’css-loader’,’scss-loader’｀,顺序是从右到左依次用加载器进行处理。
plugins 插件项
1 |
|
运用热加载后改变entry中的写法
1 |
|
1 |
|
引入webpack-dev-server后的配置项。
最后的webpack.config.js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
const webpack = require("webpack"),
path = require("path"),
ExtractTextPlugin = require('extract-text-webpack-plugin');
//每当 "react" 在代码中被引入，它会使用压缩后的 React JS 文件，而不是到 node_modules 中找。
//每当 Webpack 尝试去解析那个压缩后的文件，我们阻止它，因为这不必要。
const node_modules = path.resolve(__dirname,'node_modules'),
pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');
module.exports = {
// “__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
// entry: './app/main.js',
entry:{app:[
'webpack/hot/dev-server',
'webpack/hot/only-dev-server',
__dirname + '/app/main.js'
],
// 当 React 作为一个 node 模块安装的时候，
// 我们可以直接指向它，就比如 require('react')
vendors: ['react'],
},
output: {
path: path.join(__dirname, '/public'),
filename:'[name].js', //输入的js跟输出的js同名，，[name]-[hash].js输出的是main-一个随机值，
},
// 省略后缀,当引入js的时候可省略，，import react from 'react';
resolve:{
extensions:['','.js','.jsx','.json', '.css']
},
module: {
loaders: [
{
test:/\.js|jsx$/,
exclude:/node_modules/, //手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）
loaders: ['react-hot', 'babel']
// query:{ //将其写在了.babelrc里面
// presets:['es2015','react'] //为loaders提供额外的设置选项
// }
},
{
test:/\.css$/,
loader:ExtractTextPlugin.extract('style-loader?moudle','css-loader?moudle'), //css-moudles 在类后面随机加上一数，保证不重复,这样写'style!css!less'会出错，，，
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract('style-loader?moudle','css-loader?moudle','less-loader?moudles'),
},
{
test: /\.scss$/,
loader: 'style!css!scss'
},
{test: /\.(jpg|png)$/, loader: "file-loader?name=[hash:8].[name].[ext]"},
// 不大与25kb的时候
// {
// test: /\.(png|jpg)$/,
// loader: 'url?limit=25000'
// }
],
noParse: [pathToReact],
},
plugins: [
// 热加载插件
new webpack.HotModuleReplacementPlugin(),
new webpack.BannerPlugin("this is create by dony"), //js上面添加注释的插件
// new webpack.optimize.UglifyJsPlugin(
compress: {
warnings: false
},
), //压缩代码
new ExtractTextPlugin("style.css"),//样式与js分离
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
],
devServer: {
contentBase: __dirname + "/public",//本地服务器所加载的页面所在的目录
port: 8023, //设置端口号，默认8080
colors:true, //终端中输出结果为彩色
// histtoryApiFallback: true, //不跳转
inline:true,//实时刷新
},
clearBeforeBuild: true,
}
引入atool-build后，如果想扩展webpack(项目中的实实在在的例子),1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module.exports = function(webpackConfig) {
webpackConfig.babel.plugins.push('transform-runtime');
webpackConfig.babel.plugins.push(['antd', {
style: 'css', // if true, use less
}]);
// Enable this if you have to support IE8.
webpackConfig.module.loaders.unshift({
test: /\.jsx?$/,
loader: 'es3ify-loader',
});
webpackConfig.module.loaders.push({
test: /\.(eot|ttf|svg|woff)\?[^v]*$/,
loader: 'url-loader?limit=10000'
});
插件或者moudel可以用push的方法。对于使用vendor，因为atool-build已经内置了一个common.js,我们想改变的话可参考spm atoo-build