webpack學習筆記一：安裝webpack、webpack-dev-server、內存加載js和html文件、loader處理非js文件

時間 2019-11-17

標籤 webpack 學習筆記安裝 dev server 內存加載 html 文件 loader 處理欄目 JavaScript 简体版

原文原文鏈接

一、webpack學習環境準備：css

　　1：window系統html

　　2：安裝node.js 官方網址前端

　　　下載好後下一步下一步安裝便可node

安裝步驟略過.......jquery

　　3：nrm的安裝webpack

　　打開cmd命令控制檯輸入：npm i nrm -g （全局安裝nrm包）web

　　安裝好後使用 nrm ls 查看shell

　　使用nrm use 鏡像地址名稱npm

注意：nrm只是提供了幾個經常使用的下載包的URL地址。最終的裝包工具仍是npm或者cnpm工具，好比後面安裝webpack包：cnpm install -g webpack 就會從nrm中帶* 的地址中去下載。json

　　4:安裝cnpm 安裝包工具（以安裝webpack或者webpack-dev-server 我都使用cnpm來安裝不適用npm安裝）

　　執行命令：npm i cnpm -g （全局安裝）

2、webpack 簡單介紹

　　　　Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它能夠將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還能夠將按需加載的模塊進行代碼分隔，等到實際須要的時候再異步加載。

　　　　中文官網：https://webpack.css88.com/

　　webpack 安裝

　　　　執行 cnpm install -g webpack 命令全局安裝

　　　　執行 npm install --save-dev webpack-cli

　　　　執行 webpack -v 查看版本號（說明安裝成功了。）

3、結合簡單案例

　　　　開發工具爲 Visual Studio Code

　　　　案例初始目錄結：根目錄 webpack 裏面有dist 和src兩個文件夾 src文件夾裏建立一個html和js文件

index.html代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack-demo</title>
    <!-- <script src="./index.js"></script> -->
    <!-- 在這裏咱們就再也不直接引用main.js文件了 -->
    <script src='../dist/bundle.js'></script>
</head>

<body>
    <ul>
        <li>這是第1個li</li>
        <li>這是第2個li</li>
        <li>這是第3個li</li>
        <li>這是第4個li</li>
        <li>這是第5個li</li>
        <li>這是第6個li</li>
        <li>這是第7個li</li>
        <li>這是第8個li</li>
        <li>這是第9個li</li>
        <li>這是第10個li</li>
        <li>這是第11個li</li>
        <li>這是第12個li</li>
        <li>這是第13個li</li>
        <li>這是第14個li</li>
        <li>這是第15個li</li>
        <li>這是第16個li</li>
        <li>這是第17個li</li>
        <li>這是第18個li</li>
        <li>這是第19個li</li>
        <li>這是第20個li</li>
    </ul>
</body>

</html>

main.js代碼

// 導入jQuery ES6語法
import $ from 'jquery'

$(function () {
    // 頁面li各行變色
    $('li:odd').css('backgroundColor', 'blue');
    $('li:even').css('backgroundColor', function () {
        return '#' + 'D97634'
    });
});

這時候運行會報語法錯誤

// 導入jQuery ES6語法

import $ from 'jquery'

由於ES6的語法瀏覽器解析不了因此報錯。

這時候改用到webpack上場了...................................

　　1:初始化一下項目執行：npm init -y

這時候項目中就會多一個package.json文件

　　2：以上代碼中須要用到jquery因此要在控制檯中安裝jQuery 執行：npm i jquery -S

這時候項目中會建立一個node_modules文件夾，這裏就是一些js文件

執行webpack命令

　　 .\src\index.js：要執行的文件路徑

　　.\dist\bundle.js：執行完成後存放的路徑

　這時候dist文件家中就會多個bundle.js文件

這時候在預覽html就能夠看到效果了。。。。

若是js中代碼修改了，就要手動在此執行打包命令纔會生效。

注意若是上面安裝或者打包出現錯誤了參考一下：webpack打包The 'mode' option has not been set,錯誤提示

4、webpack執行命令打包命令配置

　　在項目根目錄中建立一個webpack.config.js文件

　　內容以下：

const path =require('path')

// 經過Node模塊操做，向外面暴露一個配置對象
module.exports={
  entry:path.join(__dirname,'./src/main.js'),// 打包文件
  output:{
    path:path.join(__dirname,'./dist'),// 打包好的文件存放地址
    filename:'bundle.js' // 打包好文件的文件名
  },
  mode: 'development' // 設置mode
}

之後在執行大包命令就沒那麼反鎖了： webpack .\src\index.js .\dist\bundle.js 直接輸入 webpack就完成打包了。

5、webpack-dev-server 自動打包編譯

　　 1：運行 cnpm i webpack-dev-server -D 安裝

　 2：安裝完成後執行webpack-dev-server 執行報錯：

　　2-1:執行上面指令會報錯，由於webpack-dev-server依賴於webpack,因爲webpack是全局安裝，webpack-dev-server是在項目中安裝

　　因此沒法在powershell中執行，只有安裝到全局(-g)的工具才能正常執行

　　注意：使用webpack-dev-server工具不只在當前項目中須要安裝webpack-dev-server還須要在本項目中安裝webpack

　　3: 要想能執行，必須在package.json文件的「script」節點下新增："dev":"webpack-dev-server"

　　4: 添加好配置後執行：npm run dev

　　4-1：若是報錯是安裝包的問題：刪除node_modules文件夾後執行 cnpm i （從新安裝包）

6、webpack-dev-server經常使用命令

--open:當在命令行執行 npm run dev 自動開啓網頁

--port 9000 修改訪問端口號

--contentBase src ：託管的根目錄

--hot ：熱啓動 ,不會當即跟新，而是以打補丁方式只打包修改部分的代碼。

7、html-webpack-plugin插件訪問內存中的網頁

　　1：在項目中執行：cnpm i html-webpack-plugin -D

　　2: 在webpack.config.js中導入

　　// 導入在內存中生成HTML的插件,只要是插件都要放到plugins節點中。

　　const htmlWebpackFlugin=require('html-webpack-plugin')

　　3：在webpack.config.js配置文件的plugins節點中加入插件

　　　　// 配置插件節點

　　　　plugins:[

　　　　new htmlWebpackFlugin({

　　　　template:path.join(__dirname,'./src/index.html'),// 指定模板頁面

　　　　filename:'index.html' // 指定要生成的文件名稱

　　　　})// 建立一個在內存中生成html頁面插件

最後執行 npm run dev

查看網頁源代碼。

8、style-loader css-loader 加載非JS文件

建一個css樣式文件去掉li前面的點　index.css　

ul li{

list-style: none;

}

　　1：安裝 style-loader css-loader這兩個第三方插件

　　　　 cnpm i style-loader css-loader -D

　　2：在js中這樣引用，import './css/index.css'

　　3：在webpack.config.js配置文件中加入：

測試重啓webpack ：npm run dev 發現li前面的樣式不見了。

9、處理less less 。。。。和上面的步驟同樣，網上搜索處理文件的loader第三方包，而後配置規則

　　 main.js 導入文件

　　　　css:import '路徑+樣式名稱.css'

　　　　less:import '路徑+樣式名稱.less'

　　　　sass:import '路徑+樣式名稱.less'

　　在項目中導入loader

　　　　css：cnpm i style-loader css-loader -D

　　　　less: cnpm i less-loader less -D

　　　　sass: cnpm i less-loader sass-D

　　在webpack.config.js配置文件module節點的rules匹配規則中加入：

　　　　css：{ test: /\.css$/, use: ['style-loader', 'css-loader'] },//配置處理.css文件的第三方loader規則

　　　　less: { test:/\.less$/,use: [ 'style-loader' , 'css-loader' , 'less-loader' ] },// 配置處理less文件loader規則

　　　　scss: { test:/\.scss$/,use: [ 'style-loader' , 'css-loader' , 'sass-loader' ] },// 配置處理less文件sass規則

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。