webpack入门

css-loader是让js可以require（）css模块，是css加载到js里，而style-loader是生成style标签把css-loader里的东西塞到html里。

到可以使用extract-text-webpack-plugin直接在html引入css文件，这样就不需要使用style-loader。

github:extract-text-webpack-plugin资料

 多页面webpack使用

依赖模块

"devDependencies": {
    "autoprefixer": "^7.2.3",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.17",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "glob": "^7.1.2",
    "html-webpack-plugin": "^2.30.1",
    "postcss-loader": "^2.0.9",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-transform-hmr": "^1.0.4",
    "style-loader": "^0.19.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  }

react部分可以忽略。

babel是为了es6准备的。

filename里使用 / 可以当成进入目录访问目标文件。

配置文件

// webpack.config.js

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const glob = require('glob');

let webpackConfig = {};

// 匹配多个目标文件，实现动态获取多个入口文件
function getEntries(globPath){
    var files = glob.sync(globPath),
       entries = {};

     files.forEach(function(filepath) {
         var split = filepath.split('/');
         var name = split[1];
         console.log(filepath);
         entries[name] = __dirname + '/' + filepath;
     });

     return entries;
}

let entries = getEntries('src/**/main.js');

webpackConfig.entry = {};
webpackConfig.plugins = [];
// 循环递归建立多入口
Object.keys(entries).forEach(function(name) {
    // 每个页面生成一个entry，如果需要HotUpdate，在这里修改entry
    webpackConfig.entry[name] = entries[name];
    
    // 每个页面生成一个html
    var Htmlplugin = new HtmlWebpackPlugin({
        // 生成出来的html文件名
        filename: name +'/'+ name + '.html',
        // 每个html的模版
        template: __dirname + '/src/'+ name +'/index.temp.html',
        // 自动将引用插入html
        inject: true,
        // 每个html引用的js模块，也可以在这里加上vendor等公用模块
        chunks: [name,'vendor'],
        // 给每个插入文件添加版本号
        hash: true
    });
    webpackConfig.plugins.push(Htmlplugin);
})

webpackConfig.entry['vendor'] = ['./lib/angular.min.js'];
// html直接引用css文件插件
webpackConfig.plugins.push(new ExtractTextPlugin('[name]/[name].css'));
// 公共文件直接引用html里
webpackConfig.plugins.push(new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor'],
        }));

// 输出目录
webpackConfig.output = {
        path: __dirname + "/page",
        filename: "[name]/[name].js"
    };

// 模块加载
webpackConfig.module = {
    rules: [
            {
                test: /(.jsx|.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /.css$/,
                exclude: /^node_modules$/,
                use: ExtractTextPlugin.extract([ 'css-loader', 'postcss-loader' ])
            }
        ]
};

// webpack配置文件
module.exports = webpackConfig;

// postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
};

// .babelrc

{
    "presets": ["react","env"]
}

postcss-loader可以另外自动引入配置文件postcss.config.js
babel也可以这样引入.babelrc

多页面引入就是使用node遍历入口文件处的所有匹配的js文件，然后写到entry对象里，而html和css的额外写出需要插件来实现。

html插件资料:html-webpack-plugin

多页面需要注意chunks 限制引入外部文件的目录位置。