webpack 開發(fā)和生產(chǎn)并行設(shè)置的方法

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 22:04:03

webpack 開發(fā)和生產(chǎn)并行設(shè)置的方法

webpack 開發(fā)和生產(chǎn)并行設(shè)置的方法:安裝依賴的4種命令生產(chǎn)依賴和開發(fā) 一個項(xiàng)目中是有開發(fā)環(huán)境和生產(chǎn)環(huán)境的，這兩個環(huán)境的依賴也是不同的開發(fā)依賴：只在開發(fā)中用來幫助你進(jìn)行開發(fā)，簡化代碼或者生成兼容設(shè)置的以來包。你可以打開package.json來查看，devDependencies的下面的這些包為開發(fā)

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀webpack 開發(fā)和生產(chǎn)并行設(shè)置的方法:安裝依賴的4種命令生產(chǎn)依賴和開發(fā) 一個項(xiàng)目中是有開發(fā)環(huán)境和生產(chǎn)環(huán)境的，這兩個環(huán)境的依賴也是不同的開發(fā)依賴：只在開發(fā)中用來幫助你進(jìn)行開發(fā)，簡化代碼或者生成兼容設(shè)置的以來包。你可以打開package.json來查看，devDependencies的下面的這些包為開發(fā)

安裝依賴的4種命令

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

一個項(xiàng)目中是有開發(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中并不存在這個包的依賴。如果你項(xiàng)目拷貝給別人繼續(xù)開發(fā)，或者別人和你git合作，再次下載項(xiàng)目npm install時就會缺少這個jquery包。項(xiàng)目就會無法正常運(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
 }
}

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

webpack 開發(fā)和生產(chǎn)并行設(shè)置的方法

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：設(shè)置生產(chǎn) 開發(fā)

熱門焦點(diǎn)

webpack 開發(fā)和生產(chǎn)并行設(shè)置的方法

webpack 開發(fā)和生產(chǎn)并行設(shè)置的方法

webpack 開發(fā)和生產(chǎn)并行設(shè)置的方法

最新推薦

猜你喜歡

熱門推薦