webpack 开发和生产并行设置的方法
时间:2018-11-08
这篇文章主要介绍了webpack 开发和生产并行设置的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
安装依赖的4种命令
生产依赖和开发
一个项目中是有开发环境和生产环境的,这两个环境的依赖也是不同的
- 开发依赖:只在开发中用来帮助你进行开发,简化代码或者生成兼容设置的以来包。你可以打开package.json来查看,devDependencies的下面的这些包为开发使用的包。这些包在生产环境中并没有用处。
- 生产依赖:就是比如我们的js使用了jquery,jquery的程序要在浏览器端起作用,也就是说我们最终的程序也需要这个包,这就是生产依赖。这些包在dependencies中。
npm install jquery
安装完成后,你会发现在package.json中并不存在这个包的依赖。如果你项目拷贝给别人继续开发,或者别人和你git合作,再次下载项目npm install时就会缺少这个jquery包。项目就会无法正常运行,所以这也是我们最不赞成的安装方法
npm install jquery --save
安装完成后,它存在于package.json的dependencies中,也就是说它是生产环境需要依赖的包(上线时需要的以来包)。
npm install jquery --save-dev
安装完成后,它存在于package.json的devDependencies中,也就是说它是开发环境中需要的,上线并不需要这个包的依赖。
npm install
根据package.json安装所有的生产和开发的包
npm install --production
安装生产环境依赖包
配置生产和开发并行
webpack.config.js
console.log(encodeURIComponent(process.env.type)); if (process.env.type == 'build') { var website = { publicPath: "http://pengrongjie.top:1717/" } } else { var website = { publicPath: "http://192.168.1.9:1717/" } }
package.json(windows)
"dev":"set type=dev&webpack"
"scripts": { "server": "webpack-dev-server --open", "dev":"set type=dev&webpack", "build": "set type=build&webpack" },
package.json(mac)
"scripts": { "server": "webpack-dev-server --open", "dev":"export type=dev&&webpack", "build": "export type=build&&webpack" },
开发
npm run dev
生产
npm run build
全部代码webpack.config.js
const path = require('path'); const glob = require('glob'); const uglify = require('uglifyjs-webpack-plugin'); const htmlPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); const PurifyCSSPlugin = require('purifycss-webpack'); console.log(encodeURIComponent(process.env.type)); if (process.env.type == 'build') { var website = { publicPath: "http://pengrongjie.top:1717/" } } else { var website = { publicPath: "http://192.168.1.9:1717/" } } module.exports = { // devtool: 'source-map', // 入口 entry: { entry: './src/entry.js', }, // 出口 output: { //绝对路径 path: path.resolve(__dirname, 'dist'), filename: '[name].js', publicPath: website.publicPath }, // 模块 module: { //规则 rules: [ // { // test: /\.css$/, // use: [ // { // loader:'style-loader' // } // ] // }, { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", // use: "css-loader" use: [ { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader' ] }) }, { test: /\.(png|jpg|gif)/, use: [{ loader: 'url-loader', options: { limit: 5000, outputPath: 'images/', } }] }, { test: /\.(htm|html)$/i, use: ['html-withimg-loader'] }, // { // test: /\.less$/, // use: [{ // loader: 'style-loader' // }, { // loader: 'css-loader' // }, { // loader: 'less-loader' // }] // } { test: /\.less$/, use: ExtractTextPlugin.extract({ use: [{ loader: 'css-loader', options: { importLoaders: 1 } }, { loader: 'less-loader' },'postcss-loader'], fallback: 'style-loader' }) }, // { // test: /\.scss$/, // use: [{ // loader:'style-loader' // },{ // loader:'css-loader' // },{ // loader:'sass-loader' // }] // }, { test: /\.scss$/, use: ExtractTextPlugin.extract({ use: [{ loader: 'css-loader', options: { importLoaders: 1 } }, { loader: 'sass-loader' }, 'postcss-loader'], fallback: 'style-loader' }) }, // { // test:/\.(js|jsx)$/, // use:{ // loader:'babel-loader', // options:{ // presets:[ // 'es2015', // 'react' // ] // } // }, // //过滤掉,不编译node_modules中的文件, // exclude:/node_modules/ // }, { test:/\.(js|jsx)$/, use:{ loader:'babel-loader', }, //过滤掉,不编译node_modules中的文件, exclude:/node_modules/ } ] }, //插件 plugins: [ // new uglify() new htmlPlugin({ minify: { removeAttributeQuotes: true }, hash: true, template: './src/index.html' }), new ExtractTextPlugin("css/index.css"), new PurifyCSSPlugin({ paths:glob.sync(path.join(__dirname,'src/*.html')), }) ], //开发服务 devServer: { contentBase: path.resolve(__dirname, 'dist'), host: '192.168.1.9', compress: true, //服务端是否启用压缩 port: 1717 } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 高性能JavaScript-JS脚本加载与执行对性能的影响
- CSS3伪类和伪元素的特性和区别
- Kafka剖析系列之Benchmark
- 初探React与D3的结合-或许是visualization的新突破?
- Redis 在Centos Linux 上的启动脚本
- 理解JavaScript的临时包装对象
- JavaScript实现私有属性
- 使用LRU算法缓存图片,android 3.0
- 深入理解JavaScript原型:prototype,__proto__和constructor
- Comparable 与 Comparator 浅析
- 必应首页平铺背景图片的实现方案
- 我们是如何优化HAProxy以让其支持200万个并发SSL连接的?
- 【译】《Understanding ECMAScript6》- 第八章-Module
- 【译】《Understanding ECMAScript6》- 第七章-Promise
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法