安装依赖的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\"

 \" s\": {
  \"server\": \"webpack-dev-server --open\",
  \"dev\":\"set type=dev&webpack\",
  \"build\": \"set type=build&webpack\"
 },

package.json(mac)

\" s\": {
  \"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: {
    content : path.resolve(__dirname, \'dist\'),
    host: \'192.168.1.9\',
    compress: true, //服务端是否启用压缩
    port: 1717
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章