网络包开发和生产并行设置方法

安装依赖于四个命令

生产依赖与发展

一个项目中有开发环境和生产环境，这两个环境的依赖性也是不同的

开发依赖：它仅在开发中用于帮助您开发、简化代码或生成具有兼容设置的包。您可以打开package.json来查看devDependencies下面的包是否是开发包。这些包在生产环境中没有用。生产依赖：比如我们的js使用jquery，jquery的程序要在浏览器中发挥作用，也就是说我们最终的程序也需要这个包，这就是生产依赖。这些包相互依赖。

npm安装jquery

安装完成后，您会发现package.json中没有这个包的依赖关系如果您的项目被复制到其他人那里进行进一步开发，或者其他人与您的git合作，那么在再次下载项目npm install时，这个jquery包将会丢失。项目不会正常运行，所以这也是我们最不赞成的安装方式

npm安装jquery -保存

安装完成后，它存在于package.json的依赖项中，这意味着它是生产环境需要依赖的包(上线时需要的自包)。

npm安装jquery -保存-开发

安装完成后，它存在于package.json的devDependencies中，这意味着开发环境中需要它，不需要这个包的dependency就能上线。

npm安装

根据package.json安装所有生产和开发包

npm安装-生产

安装生产环境依赖包

并行配置生产和开发

webpack.config.js

console . log(encodeURIComponent(process . env . type))；if(process . env . type=' build '){ var网站={ public path : ' http://Peng Junjie . top :1717/' } } else { var网站={ public path : ' http://192 . 168 . 1 . 9:1717/' } } package . JSON(windows)

dev': '设置类型=devwebpack '

scripts ' : { ' server ' : ' web pack-dev-server-open '，' dev':'set type=devwebpack '，' build ' : ' set type=buildwebpack ' }，package.json(mac)

脚本' : { '服务器' :' webpack-dev-server-open '，' dev' : '导出类型=dev webpack '，' build' : '导出类型=build webpack'}，开发

国家预防机制运行开发

生产

npm运行构建

整个代码是webpack.config.js

const path=require(' path ')；const glob=require(' glob ')；const uglify=require(' uglifyjs-web pack-plugin ')；const HTMl plugin=require(' HTMl-web pack-plugin ')；const ext plugin=require(' ext-text-web pack-plugin ')；const purifycss plugin=require(' purifycss-web pack ')；控制台。日志(encodeURIComponent)(进程。环境。类型))；if(过程。环境。type=' build '){ var网站={公共路径： ' http://彭。top :1717/' } } else { var网站={公共路径： ' http://192。168 .1 .9:1717/' } }模块。exports={//dev tool : ' source-map '，//入口条目： {条目： } ./src/entry.js '，}，//出口output: { //绝对路径路径：路径。解析(_ dirname，' dist ')，filename: '[name].js '，publicPath:网站。publicPath }，//模块module: { //规则规则： [ //{ //test: /\ .css$/，//使用：[//{//loader : ' style-loader '//}//]/}，{ test: /\ .css$/，使用： extractlextplugin。提取({ fallback : ' style-loader '，//使用： ' CSS-loader '使用：[{ loader : ' CSS-loader '，选项： { importloaders : 1 } }，' postscs-loader ']})}，{ test: /\ .(png|jpg|gif)/，使用：[{ loader : ' URL-loader '，options: { limit: 5000，outputPath: 'images/'，} }] }，{ test: /\ .(html | html)$/I、使用： ['html-withimg-loader'] }，//{ //test: /\ .减$/，//使用：[{//loader : ' style-loader '//}，{//loader : ' CSS-loader '/}，{//loader : ' less-loader '/}]//} { test :/\ .小于$/时，使用： extractextplugin。提取({使用：[{ loader : ' CSS-loader '，选项： { importloaders : 1 } }，{ loader: 'less-loader' }，' postscs-loader ']，fallback: 'style-loader' }) }，/{ //test: /\ .scss$/，//使用：[{//loader : ' style-loader '//}，{//loader : ' CSS-loader '/}，{//loader : ' sass-loader '/}]/}，{ test: /\ .scss$/，使用： extractextplugin。提取({使用：[{ loader : ' CSS-loader '，选项： { importloaders : 1 } }，{ loader: 'sass-loader' }，' postscs-loader ']，fallback: 'style-loader' })，/{ //test:/\ .(js|jsx)$/，//使用： {//loader : ' babel-loader '，//选项： {//预置：[//' es 2015 '，//' react '////]/}/}/}，////过滤掉，不编译节点_模块中的文件、//排除：/node _ modules/}、{ test:/\ .(js|jsx)$/，使用： { loader : ' babel-loader '，}，//过滤掉，不编译节点_模块中的文件，exclude:/node_modules/} ] }，//插件plugins :[//new uglify()]新html插件({ minify : { removeattributequots : true }，hash: true，template: ' ./src/index.html' })，新的extraceplugin(' CSS/index。CSS ')，新的purifycsplugin({ path s : glob。同步(路径。join(_ dirname)，' src/* .html ')，}) ]，//开发服务dev server : { content base :路径。resolve(_ dirname，' dist ')，host: '192.168.1.9 '，compress: true，//服务端是否启用压缩端口： 1717 }}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。