<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ThinkChat2.0新版上線,更智能更精彩,支持會話、畫圖、視頻、閱讀、搜索等,送10W Token,即刻開啟你的AI之旅 廣告
                [TOC] >[success] # webpack.config.js 配置 * 結構目錄 ~~~ . ├── dist // 打包后的文件 ├── src // 源碼文件 | ├── css | └── js | └── index.html | └── main.js // 這是 main.js 是我們項目的JS入口文件 ├── package.json // npm init 生成的NPM包的所有相關信息,其中sprict可以腳本 ├── .babelrc //將高級語法轉換成低級語法 └── webpack.config.js // 配置webpack的配置文件 ~~~ >[danger] ##### 配置打包的文件的出入口 ~~~ 1.在上篇文章中使用的是webpack ./src/main.js -o ./dist/bundle.js,命令進行的打 包,因此使用配置文件后,可以在配置文件直接配置好打包 2.打包主要需要一個入口文件,和一個生成文件因此在配置文件中也要做到這兩點 ~~~ * webpack.config.js 配置出入口 ~~~ 1.需要導入一個路徑包,一個webpack包 2.還需要使用 module.exports 將整個文件暴露出去 3.配置入口文件entry,和出口文件 output. 4.這次打包就不用輸入那么長的指令,只需要在控制臺輸入webpack 即可 ~~~ ~~~ const path = require('path'); const webpack = require('webpack'); module.exports = { entry:path.join(__dirname,'/src/main.js') , // 入口,表示,要使用 webpack 打包哪個文件 output: { // 輸出文件相關的配置 path: path.join(__dirname, '/dist'), // 指定 打包好的文件,輸出到哪個目錄中去 filename: 'bundle.js' // 這是指定 輸出的文件的名稱 }, } ~~~ * 配置webpack.config.json 打包 ~~~ 1.直接在控制臺輸入webpack 即可 ~~~ * 執行順序 ~~~ 1. 首先,webpack 發現,我們并沒有通過命令的形式,給它指定入口和出口 2. webpack 就會去 項目的 根目錄中,查找一個叫做 `webpack.config.js` 的配置文件 3. 當找到配置文件后,webpack 會去解析執行這個 配置文件,當解析執行完配置文件后,就得到了 配置文件中,導出的配置對象 4. 當 webpack 拿到 配置對象后,就拿到了 配置對象中,指定的 入口 和 出口,然后進行打包構建; ~~~ >[danger] ##### 構建一個實時打包 -- webpack-dev-server ~~~ 1.每一次代碼更給都要進行一次編譯,因此有了webpack-dev-server 實時打包 2.你啟動webpack-dev-server后,你在目標文件夾中,也就是這個項目中dist文件 夾,是看不到編譯后的文件的,實時編譯后的文件都保存到了內存當中。因此使用 webpack-dev-server進行開發的時候都看不到編譯后的文件. ~~~ * 安裝 ~~~ 1.npm i webpack-dev-server --save-dev ~~~ * 配置啟動 ~~~ 1.第一種,在webpack.config.js中配置了對應的devServer,然后再在 packjson.json做下面操作即可,這個配置可以快速啟動webpack-dev-server 指令,具體在webpack.config.js配置見下文 "scripts": { "dev": "webpack-dev-server" }, 2.輸入npm run dev 執行webpack-dev-server( 見圖具體分析),生成的文件是在內存中的,在整個項目的根目錄中 3.如果沒有在'webpack.config.js' 里進行配置可以直接在' packjson.json'配置 如下: "scripts": { "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot", }, open // 自動打開瀏覽器 port: 3000, // 設置啟動時候的運行端口 contentBase: 'src', // 指定托管的根目錄 hot: true // 啟用熱更新 可以頁面無刷新自動更新更改的代碼 ~~~ * 第二條 ![](https://box.kancloud.cn/3095e9e004ae55ebc7d9e7b76b355315_714x107.png) * 為什么放在內存中: ~~~ 1.由于需要實時打包編譯,所以放在內存中速度會非常快 ~~~ * webpack.config.js 配置 ~~~ const path = require('path'); const webpack = require('webpack'); // 啟用熱更新的 第2步 module.exports = { entry:path.join(__dirname,'/src/main.js') , // 入口,表示,要使用 webpack 打包哪個文件 output: { // 輸出文件相關的配置 path: path.join(__dirname, '/dist'), // 指定 打包好的文件,輸出到哪個目錄中去 filename: 'bundle.js' // 這是指定 輸出的文件的名稱 }, devServer: { open: true, // 自動打開瀏覽器 port: 3000, // 設置啟動時候的運行端口 contentBase: 'src', // 指定托管的根目錄 hot: true // 啟用熱更新 的 第1步 }, plugins: [ // 配置插件的節點 new webpack.HotModuleReplacementPlugin(), // new 一個熱更新的 模塊對象, 這是 啟用熱更新的第 3 步 //具體為什么怎么做以及配置信息見下文 ], } ~~~ >[danger] ##### 對html配置 -- html-webpack-plugin ~~~ 1. 自動在內存中根據指定頁面生成一個內存的頁面 2. 自動,把打包好的 bundle.js 追加到頁面中去,簡單的說會幫我們將html 和js自 動做匹配 ~~~ * 安裝 ~~~ 1.npm i html-webpack-plugin --save-dev ~~~ * 配置啟動 ~~~ const htmlWebpackPlugin = require('html-webpack-plugin') plugins: [ new webpack.HotModuleReplacementPlugin(), // new 一個熱更新的 模塊對象, 這是 啟用熱更新的第 3 步 new htmlWebpackPlugin({ // 創建一個 在內存中 生成 HTML 頁面的插件 template: path.join(__dirname, './src/index.html'), // 指定 模板頁面,將來會根據指定的頁面路徑,去生成內存中的 頁面 filename: 'index.html' // 指定生成在內存的頁面的名稱 }) ], ~~~ * 圖解 ![](https://box.kancloud.cn/31d78dbe758db98804ad0d092d31df83_478x299.png) >[danger] ##### css配置 -- loader * loader 作用 ~~~ 1.webpack, 默認只能打包處理 JS 類型的文件,無法處理 其它的非 JS 類型的文件; 2.如果要處理 非JS類型的文件,我們需要手動安裝一些 合適 第三方 loader 加載器; ~~~ * 安裝 ~~~ 1.npm i style-loader css-loader --save-dev // 安裝處理style 和css 2.npm i less-loader less -D // 安裝處理less 3.npm i sass-loader node-sass --save-dev // 安裝處理 sass ~~~ * 配置 ~~~ 1.打開 webpack.config.js 這個配置文件,在 里面,新增一個 配置節點,叫做 module, 它是一個對象;在 這個 module 對象身上,有個 rules 屬性,這個 rules 屬性是個 數組;這個數組中,存放了,所有第三方文件的 匹配和 處理規則; ~~~ ~~~ module: { // 這個節點,用于配置 所有 第三方模塊 加載器 rules: [ // 所有第三方模塊的 匹配規則 { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 配置處理 .css 文件的第三方loader 規則 { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置處理 .less 文件的第三方 loader 規則 { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置處理 .scss 文件的 第三方 loader 規則 ] } ~~~ * 在當前文件目錄main.js 導入css ~~~ import $ from 'jquery' // 導入css 文件下的index.css 文件 import './css/index.css' $(function () { $('li:odd').css('backgroundColor', 'red'); $('li:even').css('backgroundColor', function () { return '#' + 'D97634' }) }); ~~~ * 打包后會在頁面生成內部樣式 ![](https://box.kancloud.cn/dffd9c8e4d7c1726bfe5edd21da99550_652x145.png) * loader 執行順序 ~~~ 1. 發現這個 要處理的文件不是JS文件,然后就去 配置文件中,查找有沒有對應的第三方 loader 規則 2. 如果能找webpack.config.js對應的module里面的規則, 就會調用 對應的 loader 處理 這種文件類型; 3. 在調用loader 的時候,是從后往前調用的;例如['style-loader', 'css-loader'] 先 執行css-loader,在執行style-loader 4. 當最后的一個 loader 調用完畢,會把 處理的結果,直接交給 webpack 進行 打包合并,最終輸出到 bundle.js 中去 ~~~ >[danger] ##### css -- background中的url * 安裝 ~~~ 1.npm install url-loader file-loader --save-dev ~~~ * 配置 ~~~ 1.打開 webpack.config.js 這個配置文件,在 里面,新增一個 配置節點,叫做 module, 它是一個對象;在 這個 module 對象身上,有個 rules 屬性,這個 rules 屬性是個 數組;這個數組中,存放了,所有第三方文件的 匹配和 處理規則; 2.limit 給定的值,是圖片的大小,單位是 byte 3.如果我們引用的 圖片,大于或等于給定的 limit值,則不會被轉為base64格式的字符串, 如果 圖片小于給定的 limit 值,則會被轉為 base64的字符串 4.如果不指定圖片名字,圖片名字會自動轉換成hase,是為了防止重名 [name].[ext],[name]的含義是保持圖片原來名稱,[ext]保持原來圖片后綴 5.這里的[hash:8] 截取哈希值前八位為了防止重名 ~~~ ~~~ module: { // 配置所有第三方loader 模塊的 rules: [ { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' } ] } ~~~ * 具體案例就是在css 的background中使用了url ~~~ .box2{ width: 220px; height: 120px; background: url('../images2/使用了圖片.jpg'); background-size: cover; } ~~~ ![](https://box.kancloud.cn/057732de9581d6a4649cce7102f75950_405x59.png) >[danger] ##### css -- 處理字體圖標 * 安裝 ~~~ 1.npm install url-loader file-loader --save-dev ~~~ * 配置 ~~~ 1.打開 webpack.config.js 這個配置文件,在 里面,新增一個 配置節點,叫做 module, 它是一個對象;在 這個 module 對象身上,有個 rules 屬性,這個 rules 屬性是個 數組;這個數組中,存放了,所有第三方文件的 匹配和 處理規則; 2.配置文字的和圖片的用的是一個loader 但是配置的時候建議分開配置 ~~~ ~~~ module: { // 配置所有第三方loader 模塊的 rules: [ { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 處理 字體文件的 loader ] } ~~~ * 通過npm 安裝引入的css 文件 ~~~ 1.上面的字體以bootstrap 為例,當我們通過nmp 下載了bootstrap時候, 如果直接 import bootstrap from 'bootstrap' 引入的是js文件 2.但我們想引入css 文件要做的,首先所有的nmp 下載的包都在 node_modules文件中 ,因此bootstrap 的css 文件也其中,我們只需要去指定具體的css 目錄即可 3.如果要通過路徑的形式,去引入 node_modules 中相關的文件,可以直接 省略 路徑前面的 node_modules 這一層目錄,直接寫 包的名稱,然后后面 跟上具體的文件路徑 4.不寫 node_modules 這一層目錄 ,默認 就會去 node_modules 中查找 ~~~ * 在main.js 導入的寫法 ~~~ import 'bootstrap/dist/css/bootstrap.css' ~~~ >[danger] ##### 把js 高級語法es6 轉成低級語法 ~~~ 1. 在 webpack 中,默認只能處理 一部分 ES6 的新語法,一些更高級的ES6語法 或者 ES7 語法,webpack 是處理不了的;這時候,就需要 借助于第三方的 loader,來幫助webpack 處理這些高級的語法,當第三方loader 把 高級語法轉為 低級的語法之后,會把結果交給 webpack 去打包到 bundle.js 中 2.通過 Babel ,可以幫我們將 高級的語法轉換為 低級的語法 3.目前,我們安裝的 babel-preset-env, 是比較新的ES語法, 之前, 我們安裝的是 babel-preset-es2015, 現在,出了一個更新的 語法插件,叫做 babel-preset-env ,它包含了 所有的 和 es***相關的語法 ~~~ * 安裝 ~~~ // 一下方法只支持npm install -D babel-loader@7 babel-core babel-preset-env 1.npm i babel-core babel-loader babel-plugin-transform-runtime -D 2.npm i babel-preset-env babel-preset-stage-0 -D ~~~ * webpack.config.js 配置 ~~~ 1. 注意: 在配置 babel 的 loader規則的時候,必須 把 node_modules 目錄,通過 exclude 選項排除掉:原因有倆: 2. 如果 不排除 node_modules, 則Babel 會把 node_modules 中所有的 第三方 JS 文件,都打包編譯,這樣,會非常消耗CPU,同時,打包速度非常慢; 3. 哪怕,最終,Babel 把 所有 node_modules 中的JS轉換完畢了,但是,項目也無法正常運行! ~~~ ~~~ module: { // 配置所有第三方loader 模塊的 rules: [ { test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ }, ] } ~~~ * 在根目錄創建.babelrc文件進行配置 ~~~ 1.在項目的 根目錄中,新建一個 叫做 .babelrc 的Babel 配置文件,這個配置文件,屬于JSON格式,所以,在寫 .babelrc 配置的時候,必須符合JSON語法規范: 不能寫注釋,字符串必須用雙引號 ~~~ ~~~ { "presets": ["env", "stage-0"], "plugins": ["transform-runtime"] } ~~~
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看