• 【webpack】webpack配置


    我自己能看懂。

    1.    安装npm
    2.    Npm install –g webpack
    3.    创建项目
    4.    Npm init
    5.    创建webpack.config.js,并配置
    6.    安装项目webpack:npm install webpack –save-dev
    7.    安装插件等:npm install babel-loader babel-core babel-preset-react babel-preset-es2015 --save-dev
    8.    编译:webpack

    文档传送门:https://doc.webpack-china.org/configuration/#-

    webpack.config.js内如如下:

      1 var path = require("path");
      2 var webpack =require("webpack");
      3 var fs=require("fs");
      4 var glob=require("glob");
      5 
      6 
      7 //取文件后缀名
      8 function GetFileExt(filepath) {
      9     if (filepath) {
     10         if(filepath.indexOf("/")>0){
     11            return filepath.substring(filepath.lastIndexOf("/")+1);
     12         }else{
     13            return filepath;
     14         }
     15     }
     16 }
     17 //取文件名不带后缀
     18 function GetFileNameNoExt(filepath) {
     19     var fp= GetFileExt(filepath);
     20     return fp.substring(0,fp.lastIndexOf("."));
     21 }
     22 
     23 //获取一个初始化的webpack设置
     24 function GetSetting(){
     25     return {
     26         entry: { 
     27         },//入口
     28         output: {//出口
     29             path: __dirname + "/build/",
     30             filename: "[name].js",
     31             library: "tools",
     32             libraryTarget: "umd"
     33         },
     34         module: {
     35             rules: [
     36                 {
     37                      test: /.jsx?$/, 
     38                      loader: "babel-loader",
     39                      options: {
     40                         presets: ["react","es2015"]
     41                         //npm install babel-loader babel-core babel-preset-react babel-preset-es2015 --save-dev
     42                      }
     43                 },
     44                 {
     45                     test:/.ts$/,
     46                     loader:"ts-loader"
     47                 }
     48             ]
     49         },
     50         externals:{
     51             react:'React',
     52             'react-dom':'ReactDOM',
     53             'react-router-dom':'ReactRouterDOM'
     54         },
     55         resolve: {
     56             alias: {
     57                 'Forreacttest': path.resolve(__dirname, 'forreacttest/'),
     58                 'component': path.resolve(__dirname, 'component/'),
     59             }
     60         },
     61         plugins:[
     62                 // new webpack.optimize.UglifyJsPlugin({
     63                 //     compress: {
     64                 //         warnings: false,
     65                 //         drop_console: false,
     66                 //       }
     67                 // })
     68             ]
     69     };
     70 };
     71 function setEntry(_path,_setting){
     72     var files= glob.sync(_path);
     73     files.forEach(function(file){
     74         _setting.entry[GetFileNameNoExt(file)]=file;
     75     });
     76 }
     77 
     78 var setting=[];
     79 
     80 var blogsetting=GetSetting();
     81 blogsetting.output.filename="views/blog/[name].js";
     82 setEntry("./content/src/blog/*.js",blogsetting);
     83 //setting.push(blogsetting);
     84 
     85 var comsetting= GetSetting();
     86 setEntry("./content/src/zsphelper.js",comsetting);
     87 comsetting.output.filename="[name].js";
     88 //setting.push(comsetting);
     89 
     90 var comsetting=GetSetting();
     91 //comsetting.entry.common= ["react","react-dom"];
     92 setEntry("./content/src/common.js",comsetting);
     93 //comsetting.output.chunkFilename="[name].js";
     94 comsetting.output.filename="[name].min.js";
     95 //setting.push(comsetting)
     96 
     97 var forreacttest=GetSetting();
     98 forreacttest.output.path=__dirname+'/forreacttest/';
     99 forreacttest.output.filename='[name].js';
    100 setEntry('./forreacttest/*.jsx',forreacttest);
    101 setting.push(forreacttest);
    102 
    103 var reactcomsetting={
    104     entry:['./forreacttest/react.js','./forreacttest/reactdom.js'
    105 ,'./forreacttest/react-router.js'],
    106     output:{
    107         path:__dirname+'/forreacttest/',
    108         filename:'reactcom.js'
    109     }
    110 };
    111 //setting.push(reactcomsetting);
    112 
    113 reactcomsetting={
    114     entry: {
    115         vendor: ['react', 'react-dom']
    116     },
    117     output: {
    118         path: __dirname+'/forreacttest',
    119         filename: "[name].[chunkHash:8].js",
    120         chunkFilename: "[name].[chunkHash:8].js",
    121     },
    122     plugins: [
    123     ]
    124 }
    125 //setting.push(reactcomsetting);
    126 
    127 module.exports=setting;
  • 相关阅读:
    ABAP TCode
    SAP 常用的事务代码
    SAP FI TCode
    Little Tutorials的一篇文章断言:UML(统一建模语言)正在死亡:
    SAP PP TCode
    [ZT]解密中国IT人十大职业现状
    User Exit Query
    SAP客户端多语言设置
    一个女CIO的诞生
    DIY防奸手册之 主流硬盘型号解惑篇
  • 原文地址:https://www.cnblogs.com/zspbolg/p/9140746.html
Copyright © 2020-2023  润新知