脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → webpack 开发和生产并行

webpack 开发和生产并行设置的方法

 更新时间：2018年11月08日 10:18:31   作者：渣渣辉  
这篇文章主要介绍了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
  }
}

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

相关文章

  • 微信小程序跳转到其他网页(外部链接)的实现方法

    微信小程序跳转到其他网页(外部链接)的实现方法

    这篇文章主要介绍了微信小程序跳转到其他网页(外部链接)的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • JSQL 基于客户端的成绩统计实现方法

    JSQL 基于客户端的成绩统计实现方法

    JSQL应用案例 基于客户端的成绩统计，下面我把整个example的代码贴出来，欢迎拍砖
    2010-05-05
  • 关于编写性能高效的javascript事件的技术

    关于编写性能高效的javascript事件的技术

    这篇文章主要介绍了关于编写性能高效的javascript事件的技术 ,需要的朋友可以参考下
    2014-11-11
  • JavaScript将数组转换为链表的方法

    JavaScript将数组转换为链表的方法

    这篇文章主要介绍了JavaScript将数组转换为链表的方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-02-02
  • javascript实现点击按钮切换轮播图功能

    javascript实现点击按钮切换轮播图功能

    这篇文章主要为大家详细介绍了javascript实现点击按钮切换轮播图功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 原生JS面向对象实现打字小游戏

    原生JS面向对象实现打字小游戏

    这篇文章主要为大家详细介绍了原生JS面向对象实现打字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 判断浏览器的javascript版本的代码

    判断浏览器的javascript版本的代码

    话说最近在研究某著名跟踪系统，在其给用户的实施代码中有一段判断浏览器Javascript版本的代码引起了我的注意，于是问了下google如何判断浏览器的javascript版本
    2010-09-09
  • 原生JS获取元素集合的子元素宽度实例

    原生JS获取元素集合的子元素宽度实例

    本文主要对原生JS获取元素集合的子元素宽度的实现方法进行介绍，代码详细，具有很好的参考价值，需要的朋友一起来看下吧
    2016-12-12
  • JS轮播图中缓动函数的封装

    JS轮播图中缓动函数的封装

    这篇文章主要为大家详细介绍了JS轮播图中缓动函数的封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01
  • TypeScript使用vscode监视代码编译的过程

    TypeScript使用vscode监视代码编译的过程

    这篇文章主要介绍了TypeScript使用vscode监视代码编译,使用tsc 文件名称可以将ts文件转化为js文件，js文件可以引入在html文件中直接使用，需要的朋友可以参考下
    2021-12-12

最新评论