[AngularJS + Webpack] Production Setup
webpack angularjs setup production
2023-09-14 09:00:55 时间
Using Angular with webpack makes the production build a breeze. Simply alter your webpack configuration at runtime based on an environment variable, and you're good to go.
package.json:
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-server --content-base app", "build": "set NODE_ENV=production && cp app/index.html build/index.html && webpack" },
In Windows, when you want to set Node env, you should do :
set NODE_ENV=production //in Mac NODE_ENV=production
Copy the index.html to the build dir:
cp app/index.html build/index.html
Then run webpack, if u have installed the webpack globally, then just write:
webpack
webpack.config.js>
var webpack = require('webpack'); var config = { context: __dirname + '/app', entry: './index.js', output: { path: __dirname + '/app', filename: 'bundle.js' }, plugins: [ new webpack.DefinePlugin({ ON_TEST: process.env.NODE_ENV === "test" }) ], module: { loaders: [ {test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/}, {test: /\.html$/, loader: 'html-loader', exclude: /node_modules/}, {test: /\.css$/, loader: 'style!css', exclude: /node_modules/}, {test: /\.styl/, loader: 'style!css!stylus', exclude: /node_modules/} ] } }; if(process.env.NODE_ENV === "production"){ config.output.path = __dirname + "/build" } module.exports = config;
相关文章
- webpack的安装与基本使用
- Create react App eject后 webpack 的优化配置
- vue+webpack项目实战
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载
- webpack-dev-server启动后,localhost:8080返回index.html的原理
- webpack最简单的入门教程里bundle.js之运行单步调试的原理解析
- vue项目中sass全局引用变量 sass-resources-loader webpack配置
- Vue+ElementUI项目使用webpack输出MPA
- 正确彻底删除全局或局部 webpack 后再安装