我自己能看懂。
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;