webpack開發(fā)和生產(chǎn)并行設(shè)置的示例分析-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)webpack開發(fā)和生產(chǎn)并行設(shè)置的示例分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

站在用戶的角度思考問題，與客戶深入溝通，找到長春網(wǎng)站設(shè)計與長春網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、主機(jī)域名、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋長春地區(qū)。

安裝依賴的4種命令

生產(chǎn)依賴和開發(fā)

一個項目中是有開發(fā)環(huán)境和生產(chǎn)環(huán)境的，這兩個環(huán)境的依賴也是不同的

• 開發(fā)依賴：只在開發(fā)中用來幫助你進(jìn)行開發(fā)，簡化代碼或者生成兼容設(shè)置的以來包。你可以打開package.json來查看，devDependencies的下面的這些包為開發(fā)使用的包。這些包在生產(chǎn)環(huán)境中并沒有用處。

• 生產(chǎn)依賴：就是比如我們的js使用了jquery，jquery的程序要在瀏覽器端起作用，也就是說我們最終的程序也需要這個包，這就是生產(chǎn)依賴。這些包在dependencies中。

npm install jquery

安裝完成后，你會發(fā)現(xiàn)在package.json中并不存在這個包的依賴。如果你項目拷貝給別人繼續(xù)開發(fā)，或者別人和你git合作，再次下載項目npm install時就會缺少這個jquery包。項目就會無法正常運(yùn)行，所以這也是我們最不贊成的安裝方法

npm install jquery --save

安裝完成后，它存在于package.json的dependencies中，也就是說它是生產(chǎn)環(huán)境需要依賴的包（上線時需要的以來包）。

npm install jquery --save-dev

安裝完成后，它存在于package.json的devDependencies中，也就是說它是開發(fā)環(huán)境中需要的，上線并不需要這個包的依賴。

npm install

根據(jù)package.json安裝所有的生產(chǎn)和開發(fā)的包

npm install --production

安裝生產(chǎn)環(huán)境依賴包

配置生產(chǎn)和開發(fā)并行

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"
 },

開發(fā)

npm run dev

生產(chǎn)

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: {
    //規(guī)則
    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')),
    })
  ],
  //開發(fā)服務(wù)
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    host: '192.168.1.9',
    compress: true, //服務(wù)端是否啟用壓縮
    port: 1717
  }
}

感謝各位的閱讀！關(guān)于“webpack開發(fā)和生產(chǎn)并行設(shè)置的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

本文題目：webpack開發(fā)和生產(chǎn)并行設(shè)置的示例分析-創(chuàng)新互聯(lián)
文章鏈接：http://muchs.cn/article42/dphgec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、定制網(wǎng)站、網(wǎng)站設(shè)計公司、品牌網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)