WEBPACK4 X基本專案環境搭建

2021-08-28 12:35:20 字數 2897 閱讀 4387

webpack4.x基本專案環境搭建

一、webpack安裝

1.若沒安裝過webpack，那麼首先是全域性安裝

npm install webpack -g 


npm install webpack-cli -g
2.建立乙個專案進行webpack的區域性安裝並生成乙個package.json

npm init


npm install webpack -s 


npm install webpack-cli -s
3.打包：打包用的是webpack命令同時也可以分2種情況

webpack –mode production(生產環境) 


webpack –mode development(開發環境)
附加：我們可以在package.js下的scripts來簡化命令

例如：

"scripts": ,
二、webpack4.x配置(webpack.config.js)

webpack有4個核心概念

入口(entry) --> 輸出(output)--> loader-->外掛程式(plugins)
1.多檔案入口配置和出口配置

module.exports = ,//入口


output: 


};
2.devserver安裝和配置

首先是npm安裝

npm install webpack-dev-server -d
然後在webpack.config.js中配置如下：

devserver:
執行配置：

"start": "webpack-dev-server --open"


（webpack-dev-server --open --inline(這個也是可以的，做到實時重新整理)）
3.loader配置（loader的作用就是：webpack支援js，不支援css和html，讓webpack支援，則需要loader而palugins可以有效打包或壓縮css，js，html，。）

a.引入css需要css-loader和style-loader，載入需要file-loader

npm install style-loader css-loader -d(s)


npm install file-loader -d
配置：

module: ,//正則，表示字尾為css的檔案


//同理......


]}
三、外掛程式

a.html-webpack-plugin，這是乙個很重要的外掛程式。

npm install html-webpack-plugin -d(s)
配置

const htmlwebpackplugin = require('html-webpack-plugin'); //通過 npm 安裝


const webpack = require('webpack'); //訪問內建的外掛程式


//此處省略module.exports


plugins: [


//new webpack.optimize.uglifyjsplugin(),


new htmlwebpackplugin(


})]
上述配置僅僅只是對單個頁面進行了配置，若有很多頁面，這樣配置是不妥的，需要抽象函式

抽象如下：

let gethtmlconfig = (name)=>.html`,


filename: `$.html`//改html的輸出檔名index.html改為了a.hmtl,


inject: true,


chunks: ["common",name],


minify: }}


//plugins: [


//new htmlwebpackplugin(gethtmlconfig('index')),


new htmlwebpackplugin(gethtmlconfig('jbt_btn'))


]
b.css提取分離外掛程式

npm install extract-text-webpack-plugin@next -d(s)
配置

const extracttextplugin=require("extract-text-webpack-plugin")


//然後在plugins裡面引入


new extracttextplugin('./css/[name].css')


//在對css-loader配置做出改動


}],publicpath;"../"


})}
四、配置babel

首先安裝

npm install babel-core babel-loader babel-preset-env babel-preset-react -s
在根目錄下建乙個.babelrc檔案

再在其檔案中寫人

在webpack.config.js下寫入：

,exclude:/node_modules/ //排除不編譯node_modules檔案

}這樣乙個基本的webpack環境就搭建出來了

建立基本的webpack4 x專案

執行npm init y快速初始化專案 在專案根目錄建立src源 目錄和dist產品目錄 在 src 目錄下建立index.html 使用 cnpm 安裝 webpack 執行cnpm i webpack webpack cli d 如何安裝cnpm 全域性執行npm i cnpm g 注意 web...

webpack4 x專案的建立

1.執行npm init y快速初始化專案 2.在專案根目錄下建立src源 目錄和dist產品目錄 3.在src目錄下建立index.html 4.使用cnpm安裝webpack，執行cnpm i webpack webpack cli d 全域性執行npm i cnpm g 5.建立webpack...

webpack 4 x安裝命令

執行npm i webpack g全域性安裝webpack，這樣就能在全域性使用webpack的命令 在專案根目錄中執行npm i webpack安裝到專案依賴中 執行npm init y初始化專案 建立專案基本的目錄結構src 和 dist,在src裡新建index.html 使用npm i jq...