1、webpack打包是基于寻找js文件 分离 css 实现打包

在网上找到多入口打包都不适合项目 于是乎基于找的一个模板自己摸索
项目结构

image.png

src 下为文件目录
支持scss es6
主要模块

image.png

最重要的就是入口文件配置

    function getEntry() {
        var jsPath = path.resolve(srcDir, 'js');
        var dirs = fs.readdirSync(jsPath);
        var matchs = [], files = {};
      dirs.forEach(function (item) {
            matchs = item.match(/(.+)\.js$/);
            if (matchs) {
                files[matchs[1]] = path.resolve(srcDir, 'js', item);
            } else {
        var dirss = fs.readdirSync(path.join(path.resolve(srcDir, 'js'), item))
            dirss.forEach(function (items) {
            matchs = items.match(/(.+)\.js$/);
            matchs[1] = item + '\\' + matchs[1];
            files[matchs[1]] = path.resolve(srcDir, 'js', item) + '\\' + matchs[0];
              });
          }
        // console.log(files[matchs[1]]+'555')
      });
        return files;
  }

css 抽离

// 分离css插件参数为提取出去的路径

    new extractTextPlugin({
        // filename: 'css/[name].[hash:8].min.css',
        filename: 'css/[name].css',
        ignoreOrder: true
    }),
    //压缩css
    new OptimizeCSSPlugin({
        cssProcessorOptions: {
            safe: true,
            map: { inline: false }, 
            autoprefixer: { remove: false }  //添加对autoprefixer的配置
        }
    }),

loader

{
    test: /\.(gif|png|jpe?g|svg)$/i,
    use: [{
        // 需要下载file-loader和url-loader
        loader: "url-loader",
        options: {
            limit: 1, //小于这个时将会已base64位图片打包处理
            name: '[path][name].[ext]',
            context:'src',
            // 图片文件输出的文件夹
            // publicPath:'/home/newbfyj/',
            publicPath:'../../',
            outputPath: "./"
        }
    }]
},
{
test: /\.(eot|otf|ttf|woff|woff2)\w*/,
    loader: 'url-loader',
    options: {
        limit: 1,
        name: '[path][name].[ext]',
        publicPath:'../../',
        context:'src',
    }, 
},

附上github
https://github.com/xiaollifeidao/vue-build-/tree/master/webpack4