webpack 開發(fā)和生產(chǎn)并行設(shè)置的方法
安裝依賴的4種命令
生產(chǎn)依賴和開發(fā)
一個(gè)項(xiàng)目中是有開發(fā)環(huán)境和生產(chǎn)環(huán)境的,這兩個(gè)環(huán)境的依賴也是不同的
- 開發(fā)依賴:只在開發(fā)中用來幫助你進(jìn)行開發(fā),簡(jiǎn)化代碼或者生成兼容設(shè)置的以來包。你可以打開package.json來查看,devDependencies的下面的這些包為開發(fā)使用的包。這些包在生產(chǎn)環(huán)境中并沒有用處。
- 生產(chǎn)依賴:就是比如我們的js使用了jquery,jquery的程序要在瀏覽器端起作用,也就是說我們最終的程序也需要這個(gè)包,這就是生產(chǎn)依賴。這些包在dependencies中。
npm install jquery
安裝完成后,你會(huì)發(fā)現(xiàn)在package.json中并不存在這個(gè)包的依賴。如果你項(xiàng)目拷貝給別人繼續(xù)開發(fā),或者別人和你git合作,再次下載項(xiàng)目npm install時(shí)就會(huì)缺少這個(gè)jquery包。項(xiàng)目就會(huì)無(wú)法正常運(yùn)行,所以這也是我們最不贊成的安裝方法
npm install jquery --save
安裝完成后,它存在于package.json的dependencies中,也就是說它是生產(chǎn)環(huán)境需要依賴的包(上線時(shí)需要的以來包)。
npm install jquery --save-dev
安裝完成后,它存在于package.json的devDependencies中,也就是說它是開發(fā)環(huán)境中需要的,上線并不需要這個(gè)包的依賴。
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: { //絕對(duì)路徑 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 } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js獲取頁(yè)面引用的css樣式表中的屬性值方法(推薦)
下面小編就為大家?guī)硪黄猨s獲取頁(yè)面引用的css樣式表中的屬性值方法(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08js與jquery獲取input輸入框中的值實(shí)例講解
在本篇文章里小編給大家整理了關(guān)于js與jquery獲取input輸入框中的值實(shí)例講解,需要的朋友們可以學(xué)習(xí)參考下。2020-02-02JavaScript數(shù)組特性與實(shí)踐應(yīng)用深入詳解
這篇文章主要介紹了JavaScript數(shù)組特性與實(shí)踐應(yīng)用,較為深入而詳細(xì)的分析了javascript數(shù)組的功能、屬性、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2018-12-12css和js實(shí)現(xiàn)彈出登錄居中界面完整代碼
這篇文章主要介紹了css和js實(shí)現(xiàn)彈出登錄居中界面,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-11-11JavaScript實(shí)現(xiàn)顯示和隱藏圖片
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)顯示和隱藏圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04一個(gè)簡(jiǎn)單的JavaScript Map實(shí)例(分享)
下面小編就為大家?guī)硪黄粋€(gè)簡(jiǎn)單的JavaScript Map實(shí)例(分享)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08js HTML5多圖片上傳及預(yù)覽實(shí)例解析(不含前端的文件分割)
這篇文章主要詳細(xì)解析了js HTML5多圖片上傳及預(yù)覽實(shí)例,不含前端的文件分割,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08