WEBPACK4 X基本專案環境搭建

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...

WEBPACK4 X基本專案環境搭建

建立基本的webpack4 x專案

webpack4 x專案的建立

webpack 4 x安裝命令

相關推薦