安装依赖的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 } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 纯音入心系列纯音乐《天籁古筝》1CD[MP3][331MB]
- 男女对唱典藏天碟《发烧对唱·那个季节里的歌DSD》10CD[WAV]
- 群星2010-歌林精选辑[歌林][WAV+CUE]
- TrioZimbalist-PianoTriosofWeinberg,Auerbach,Dvorak(2024)[24-44,1]wav
- 群星.1992-滚石第一流台湾歌·12王牌大车拼【滚石】【WAV+CUE】
- 林子祥.1984-创作歌集【华纳】【WAV+CUE】
- 周汤豪.2010-周汤豪【华纳】【FLAC分轨】
- Mozart-TheStringQuintets-AmadeusQuartet,CecilAronowitz(2017)[24-44,1][WAV+CUE]
- JamesWilliamsDennisIrwin-Focus(2024,Red)[24-48]FLAC
- 藤泽麻衣《空みあげて》[WAV]
- 纯音入心系列纯音乐《中国古筝经典名曲》1CD[MP3][1.3GB]
- 纯音入心系列纯音乐《古筝新奏:岁月静好与筝语,细水流年与筝同》1CD[MP3][846.9MB]
- 670《脆弱敏感小女生》[320K/MP3][27.53MB]
- 曾琳.2011-好好爱我【南方】【WAV+CUE】
- 范晓萱.1995-RAIN【福茂】【WAV+CUE】