[Javascript] ADD a browser build to an NPM module

In this lesson, we ' re going to use to webpack create a UMD (Universal module Definition) Build of our Module so users can Consume it in a browser.

Install:

NPM Install--save-dev npm-run-all cross-env Rimraf webpack

Package.json:

  "Scripts": {    "Build":"Npm-run-all--parallel build:*",    "Prebuild":"Rimraf Dist",    "Build:main":"cross-env node_env=production Webpack",    "BUILD:UMD":"cross-env NODE_ENV=UMD webpack--output-filename index.umd.js",    "Build:umd.min":"cross-env NODE_ENV=UMD webpack--output-filename index.umd.min.js-p"  },

Webpack.config.js:

//Modify the production path to dist folderif(Process.env.NODE_ENV = = ='Production') {Config.output.path= Path.join (__dirname,'Dist' ); Config.plugins.push (NewWebpack.optimize.UglifyJsPlugin ({output: {comments:false } } ) ); Config.devtool='Source-map';}if(Process.env.NODE_ENV = = ='UMD') {Config.output.path= Path.join (__dirname,'Dist' ); Config.output.libraryTarget='UMD'; Config.output.library='ttmdtable'; Config.devtool='Source-map';}

After publish the module, can download the file from npmcdn.com.

_____

varWebpack = require ('Webpack');varPath = require ('Path');varExtracttextplugin = require ("Extract-text-webpack-plugin");varHtmlwebpackplugin = require ('Html-webpack-plugin');varCopywebpackplugin = require ('Copy-webpack-plugin');varPostcss = require ('Postcss-loader');varAutoprefixer = require ('Autoprefixer');varENV =Process.env.NODE_ENV;varConfig ={debug:true, Devtool:'Cheap-source-map', Context: __dirname, Output: {path: __dirname, FileName:'Angular-md-table.min.js', Sourcemapfilename:'Angular-md-table.min.js.map', Publicpath:'./'}, entry:'./index.js', module: {loaders: [{test:/\.css$/, Loader:ExtractTextPlugin.extract ('Style-loader','Css-loader!postcss-loader')}, {test:/\.scss$/, Loader:ExtractTextPlugin.extract ('Style-loader','Css-loader!postcss-loader!sass-loader')}, {test:/\.js$/, loaders: ['ng-annotate','Babel?presets[]=es2015,plugins[]=transform-runtime'], exclude:/node_modules|bower_components/}, {test:/\. (woff|woff2|ttf|eot|svg|jpg|png) (\?]?. *)?$/, Loader:'File-loader?name=res/[path][name]. [ext]? [Hash]'}, {test:/\.html$/, Loader:'Html?removeemptyattributes=false&collapsewhitespace=false'}, {test:/\.json$/, Loader:'JSON'}]}, Postcss:function () {return[Autoprefixer]; }, plugins: [NewWebpack.optimize.OccurenceOrderPlugin (true),        NewWebpack. Defineplugin ({MODE: {Production:process.env.NODE_ENV==='Production', Dev:process.env.NODE_ENV==='Development'            }        }),        NewExtracttextplugin ("Index.min.css")    ]};if(Process.env.NODE_ENV = = ='Production') {Config.output.path= Path.join (__dirname,'Dist' ); Config.plugins.push (NewWebpack.optimize.UglifyJsPlugin ({output: {comments:false } } ) ); Config.devtool='Source-map';}if(Process.env.NODE_ENV = = ='UMD') {Config.output.path= Path.join (__dirname,'Dist' ); Config.output.libraryTarget='UMD'; Config.output.library='ttmdtable'; Config.devtool='Source-map';} Module.exports= config;

[Javascript] ADD a browser build to an NPM module