webpack中如何操作dev與prd

npm init -y //初始化項(xiàng)目
npm install webpack webpack-cli -D //安裝webpack webpack-cli 依賴
npx webpack --mode development // npx可以直接運(yùn)行node_modules/.bin目錄下面的命令

"scripts": {
 "build": "webpack --mode development",
},

module: {
 rules:[
 { 
 test: /\.css$/,
 use: ['style-loader','css-loader']
 }
 ]
}

module: {
 rules:[
 {
 test: /\.css$/,
 loader: ["style-loader", "css-loader"]
 },
 ]
}

module: {
 rules:[
 {
 test: /\.css$/,
 use:[
 { loader:"style-loader"},
 { 
 loader: 'css-loader',
 options: {sourceMap: true}
 }
 ]
 }
 ]
}

{ 
 test: /\.jpeg$/, 
 use: 'url-loader?limit=1024&name=[path][name].[ext]&outputPath=img/&publicPath=output/', 
}

{ 
 test: /\.jpeg$/, 
 use: {
 loader:'url-loader',
 options:{
 limit:1024,
 name:[path][name].[ext],
 outputPath:img/
 publicPath:output/'
 }
 }
}

{
 test: /\.js/,
 use: {
 loader: 'babel-loader',
 query: {
 presets: ["env", "stage-0", "react"]
 }
 }
},

.babelrc
{
 "presets": [
 "env",
 "stage-0",
 "react"
 ]
}

const HtmlWebpackPlugin = require('html-webpack-plugin');
new HtmlWebpackPlugin({
 template: './src/index.html',//指定產(chǎn)的HTML模板
 filename: `index.html`,//產(chǎn)出的HTML文件名
 title: 'index',
 hash: true,// 會(huì)在引入的js里加入查詢字符串避免緩存,
 minify: {
 removeAttributeQuotes: true
 }
}),

npm i extract-text-webpack-plugin@next -D

const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
let cssExtract = new ExtractTextWebpackPlugin({
 filename: 'css/css.css',
 allChunks: true
});

module:{
 rules:[
 {
 test: /\.css$/,//轉(zhuǎn)換文件的匹配正則
 loader: cssExtract.extract({
 use: ["css-loader?minimize"]
 })
 },
 ]
}
plugins:[
 ...... ,
 + cssExtract
]

rules: {
 test: /\.js$/,
 loader:'babel-loader',
 include: path.resolve(__dirname, 'src'),//只轉(zhuǎn)換或者編譯src 目錄 下的文件
 exclude: /node_modules/ //不要解析node_modules
}

WebpackTest
|
|
| - src
| | - index.js
|
| - lib
| | - fetch
| |
| browser.js
| node.js
| package.json
|
| - webpack.config.js

{
 "name": "fetch",
 "version": "1.0.0",
 "description": "",
 "node": "./node.js",
 "browser": "./browser.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
 "author": "",
 "license": "ISC"
}

resolve: {
 extensions: ['.js', '.json'],
 mainFields: ['main', 'browser', 'node'],
 modules: [path.resolve('node_modules'), path.resolve('lib')]
}

let fetch = require('fetch');
console.log(fetch);

mainFields: ['main', 'node','browser']

const path = require('path');
const webpack = require('webpack')
module.exports = {
 entry: {
 react: ['react', 'react-dom']
 },
 output: {
 path: path.join(__dirname, 'dist'),// 

webpack --config webpack.react.config.js --mode development

output：{
 library:_dll_react
}

new webpack.DllReferencePlugin({
 manifest: path.join(__dirname, 'dist', 'manifest.json')
})

import React from 'react';\n//import ReactDOM from 'react-dom';
 (function(module, exports, __webpack_require__) {
"use strict";
eval("\n\n//import name from './base';\n//import React from 'react';\n//import ReactDOM from 'react-dom';\n//import ajax from 'ajax';\n//let result = ajax('/ajax');\n\n//ReactDOM.render(<h1>{result}</h1>, document.getElementById('root'));\n// fetch fetch.js fetch.json fetch文件夾\n//let fetch = require('fetch');\n//console.log(fetch);\n//let get = require('../dist/bundle.js');\n//get.getName();\nconsole.log('hello');\n\nvar name = 'zfpx';\nconsole.log(name);\nif (true) {\n var s = 'ssssssssssssssssssssssss';\n console.log(s);\n console.log(s);\n console.log(s);\n console.log(s);\n}\n\n//# sourceURL=webpack:///./src/index.js?");
/***/ })
/******/ });