激光切管排版套料軟件

webpack可以進行零配置

打包工具，把JS模塊進行打包然後輸出
打包支持JS的模塊化

在使用webpack進行打包的時候，默認情況下會將src下的入口文件index.js進行打包
在不設置mode的情況下，打包出來的文件自動壓縮
npx webpack
複製代碼設置mode爲開發模式，打包後的文件不被壓縮
npx webpack --mode development
複製代碼注：

node v8.2版本以後都會有一個npx
npx會執行bin裏面的文件

當執行npx webpack命令的時候，webpack會自動查找項目中src目錄下的index.js文件，然後進行打包，生成一個dist目錄並存在一個打包好的main.js文件
生成目錄

配置webpack.config.js
新建webpack.config.js文件

在webpack項目下新建一個webpack.config.js文件

異步默認配置文件的名字是webpack.config.js
//webpack是node寫出來的node的寫法
let path = require(‘path’)
module.exports = {
mode: ‘development’,//模式默認兩種 production development開發模式
entry: ‘./src/index.js’,//入口文件
output:{
filename:‘bundle.js’,//打包後的文件名
path: path.resolve(‘dist’)//路徑必須是一個絕對路徑,當前目錄下產生一個dist目錄
}
}
複製代碼打包後項目目錄

配置腳本
如果覺得命名太長了，就到package.json裏面配置一些腳本
“scripts”: {
“build”: “webpack --config webpack.config.js”,
“dev”: “webpack-dev-server”
},
複製代碼這裏的–config指的是添加配置文件，webpack.config.js文件名
執行npm run build就是我們打包後的文件，這是生產環境下、上線需要的文件
執行npm run dev 是我們開發環境下的文件
配置入口文件的類型
單入口和單出口
entry:’./src/index.js’
複製代碼多入口和單出口
有的時候我們有多個頁面，就需要使用多個出口
entry:[’./src/index.js’,’./src/other.js’]
複製代碼多入口和多出口
//webpack是node寫出來的node的寫法
let path = require(‘path’);

module.exports = {
entry: {
index: ‘./src/index.js’,
other:’./src/other.js’
},
output:{
filename: ‘[name].js’,
path: path.resolve(‘dist’)
},
}
複製代碼這個時候npm run build，就會看到兩個打包好的JS文件

配置HTML模板
安裝插件
yarn add html-webpack-plugin -D
複製代碼新建index.html
在src目錄下邊新建一個index.html文件
touch index.html
複製代碼單頁面開發
再webpack.config.js裏面引用
//webpack是node寫出來的node的寫法
let path = require(‘path’);
let HtmlWebpackPlugin = require(‘html-webpack-plugin’);

module.exports = {
entry: ‘./src/index.js’,//入口文件
output: {
// 添加hash可以防止文件緩存，每次都會生成4位的hash串
filename: ‘bundle.[hash:4].js’,
path: path.resolve(‘dist’)
},
plugins: [
// 通過new一下這個類來使用插件
new HtmlWebpackPlugin({
// 在src目錄下創建一個index.html
template: ‘./src/index.html’,
hash: true, // 會在打包好的bundle.js後面加上hash串
})
]
}
複製代碼執行
接着npm run build執行一下

打包後自動引入JS
多頁面開發
開發的時候有時候不止一個頁面，會要配置多個頁面
我們把之前的dist目錄刪掉
再webpack.config.js裏面引用
//webpack是node寫出來的node的寫法
let path = require(‘path’);
let HtmlWebpackPlugin = require(‘html-webpack-plugin’);

module.exports = {
// 多頁面開發，怎麼配置多頁面
entry: {
index: ‘./src/index.js’,
other: ‘./src/other.js’
},
// 出口文件
output: {
filename: ‘[name].js’,
path: path.resolve(‘dist’)
},
plugins: [
new HtmlWebpackPlugin({
template: ‘./src/index.html’,
filename: ‘index.html’,
chunks: [‘index’] // 對應關係,index.js對應的是index.html
}),
new HtmlWebpackPlugin({
template: ‘./src/other.html’,
filename: ‘other.html’,
chunks: [‘other’] // 對應關係,login.js對應的是login.html
})
]
}
複製代碼執行
接着npm run build執行一下，就會看到dist目錄下邊多了兩個文件

配置CSS模塊
安裝
yarn add style-loader css-loader -D

yarn add less less-loader -D
複製代碼新建文件

在src目錄下新建一個style.css文件
在src目錄下新建一個style.less文件

src/index.js
import ‘./style.css’;
import ‘./style.less’;
複製代碼webpack.config.js
//webpack是node寫出來的node的寫法
let path = require(‘path’);

// webpack.config.js
module.exports = {
entry: {
index: ‘./src/index.js’
},
output: {
filename: ‘bundle.js’,
path: path.resolve(‘dist’)
},
module: {
rules: [
{
test: /.css$/, // 解析css
use: [‘style-loader’, ‘css-loader’] // 從右向左解析
}
]
}
}
複製代碼接着npm run build執行一下
執行後目錄截圖

拆分單個CSS
安裝
yarn add mini-css-extract-plugin -D
複製代碼新建文件

src文件下邊新建css文件和less文件
css文件下邊新建style.css文件
less文件下邊新建style.less文件

index.js
import ‘./css/style.css’;
import ‘./less/style.less’;
複製代碼webpack.config.js
let MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);

module.exports = {
module: {
rules: [
{
test: /.css$/,
use: [MiniCssExtractPlugin.loader, ‘css-loader’]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: ‘css/ming.css’
})
]
}
複製代碼執行後目錄截圖

拆分多個css
index.js
import ‘./css/style.css’;
import ‘./css/reset.less’;
複製代碼webpack.config,js
let ExtractTextWebpackPlugin = require(‘extract-text-webpack-plugin’);
let styleLess = new ExtractTextWebpackPlugin(‘css/style.css’);
let resetCss = new ExtractTextWebpackPlugin(‘css/reset.css’);

module.exports = {
module: {
rules: [
{
test: /.css $KaTeX parse error: Expected 'EOF', got '}' at position 113: \dots}) }̲, {\dots$ /,
use: styleLess.extract({
use: ‘css-loader’
})
}
]
},
plugins: [
styleLess,
resetCss
]
}
複製代碼執行後目錄截圖

引入圖片打包
安裝
yarn add file-loader url-loader -D
複製代碼file-loader默認會在內部生成一張圖片到build目錄下
url-loader是通過base64編碼的方法來展示圖片
JS創建圖片引入
src/index.js
import logo from ‘./logo.jpg’//把圖片引入，返回的結果是一個新的圖片地址
let image = new Image();
image.src = ‘./logo.jpg’//就是一個普通的字符串
document.body.appendChild(image);
複製代碼webpack.config.js
{
test:/.(jpg|png|gif|svg) $KaTeX parse error: Expected group after '_' at position 48: \dotslude:path.join(_̲_dirname,'./src\dots$ /,
use: ‘file-loader’
},
]
複製代碼引入字體圖片和svg圖片
webpack.config.js
rules:[
{
test: /.(png|jpg|gif) $KaTeX parse error: Expected 'EOF', got '}' at position 218: \dots } }̲, ] 複製代碼\dots$ /,
use: [‘style-loader’, ‘css-loader’, ‘postcss-loader’]
}
]
}
}
複製代碼轉成es6語法
Babel會將ES6的代碼轉成ES5的代碼
安裝
yarn add babel-core babel-loader babel-preset-env babel-preset-stage-0 -D
複製代碼webpack.config.js
module.exports ={
module:{
rules:[
{
test:/.js$/,
use:{
loader:‘babel-loader’,
options:{//用babel-loader 需要把es6轉換成es5
presets:[
‘@babel/preset-env’
]
}
}
},
}
}
複製代碼服務器配置
webpack.config.js裏添加
devServer: {//開發服務器的配置
host: ‘localhost’, //默認是localhost
port: 3000,//端口
progress: true,//希望在內存中打包看到一個進度條
contentBase:’./build’,//希望./build目錄作爲靜態目錄
compress: true
},
複製代碼配置source-map
webpack.config.js添加
源碼調試，會單獨生成一個sourcemap文件出錯了表示當前報錯的列和行
devtool: ‘source-map’ //添加映射文件，可以幫我們調試源代碼
複製代碼不會參數單獨的文件，但是可以顯示行和列
devtool:‘eval-source-map’,
複製代碼不會參數列，但是是一個單獨的映射文件
devtool: ‘cheap-module-source-map’ //產生後你可以保留起來
複製代碼不會產生文件，集成在打包後的文件中，不會參數列
devtool:‘cheap-module-eval-source-map’
複製代碼打包前清除輸出目錄
安裝
yarn add clean-webpack-plugin -D
複製代碼webpack.config.js添加
let CleanWebpackPlugin = require(‘clean-webpack-plugin’);

module.exports = {
plugins: [
new CleanWebpackPlugin(‘dist’)
]
}
複製代碼熱更新
以前每次頁面更新都要重新更新，熱更新是隻更新某個部分
代碼編寫
devServer:{
hot: true,
}

plugins:[
//熱更新插件
new webpack.NamedModulesPlugin(),//打印更新的模塊路徑
new webpack.HotModuleReplacementPlugin() //熱更新插件
]
複製代碼resolve屬性的配置
resolve常用來配置別名和省略後綴名
代碼編寫
resolve:{//解析第三方包
modules:[path.resolve(‘node_modules’)],
extensions:[’.js’,’.css’,’.json’,’.vue’],

    mainFiles:[],//入口文件的名字index.js
        alias:{//別名
         bootstrap:'bootstrap/dist/css/bootstrap.css'
    }
},

複製代碼抽離公共代碼
在多個頁面中抽取頁面的代碼
代碼編寫
module.exports = {
//優化
optimization:{
splitChunks:{
//分離代碼塊
cacheGroups:{
//緩存組
common:{
//公共的模塊
chunks: ‘initial’,
minSize:0,
minChunks:2,
},
vendor:{
priority:1,
test:/node_modules/,//把你抽離出來
chunks: ‘initial’,
minSize: 0,
minChunks: 2,
}
}
}
},
}
複製代碼webpack自帶優化

import 在生產環境下會自動去除掉沒用的代碼

tree-shaking 把沒用的代碼自動刪除掉

es6模塊會把結果放在defalut上

scope hosting作用域提升

。

weixin_【sjk6070】

發佈了15 篇原創文章 · 獲贊 0 · 訪問量 541

私信關注

激光切管排版套料軟件

聽說你還搞不定java中的==和equals？

使用 Python 遠程登陸服務器的最佳實踐

Android NDK入門：C++ 基礎知識

你寫的Java對象究竟佔多少內存？

說透MySQL裏面的各種鎖

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結