[TOC] >[success] # 完整配置 ~~~ 1.上面將這個步驟一一拆解，現在是一個整體講解 ~~~ >[danger] ##### 步驟 * 項目目錄 ~~~ ├── dist // 打包后的文件 ├── src // 源碼文件 | ├── css | └── js | └── index.html | └── main.js // 這是 main.js 是我們項目的JS入口文件 ├── package.json // npm init 生成的NPM包的所有相關信息，其中sprict可以腳本 ├── .babelrc //將高級語法轉換成低級語法 └── webpack.config.js // 配置webpack的配置文件 ~~~ ~~~ 1.創建一個上面的結構目錄 2.nmp init 生成一個package.json 配置文件 3.安裝webpack兩種方式任選:npm i webpack -g全局安裝/npm i webpack --save-dev安裝開發環境中 4.如果使用的是webpack4 還需要安裝:npm i webpack-cli -g 5.在根目錄創建 -- webpack.config.js 文件 6.安裝 webpack-dev-server 內存中打包js，開啟一個本地服務 -- npm i webpack-dev-server --save-dev 7.安裝html-webpack-plugin 內存中生成html 并且將js自動加入html中 -- npm i html-webpack-plugin --save-dev 8.下載loader處理css 文件： 8.1.npm i style-loader css-loader --save-dev // 安裝處理style 和css 8.2.npm i less-loader less -D // 安裝處理less 8.3.npm i sass-loader node-sass --save-dev // 安裝處理 sas 9.下載loader處理css background中的url，和字體庫中的字體 npm install url-loader file-loader --save-dev 10.把js 高級語法es6 轉成低級語法: 10.1.npm i babel-core babel-loader babel-plugin-transform-runtime -D 10.2.npm i babel-preset-env babel-preset-stage-0 -D 11.配置吧高級語法轉換低級語法的文件在根目錄叫.babelrc 12..babelrc配置的內容: { "presets": ["env", "stage-0"], "plugins": ["transform-runtime"] } 13.在package.json 配置快速啟動(運行指令是npm run dev)： "scripts": { "dev": "webpack-dev-server" }, ~~~ >[danger] ##### webpack.config.js -- 配置 ~~~ const path = require('path'); const webpack = require('webpack'); // 啟用熱更新的 第2步 const htmlWebpackPlugin = require('html-webpack-plugin') 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 步 new htmlWebpackPlugin({ // 創建一個 在內存中 生成 HTML 頁面的插件 template: path.join(__dirname, './src/index.html'), // 指定 模板頁面，將來會根據指定的頁面路徑，去生成內存中的 頁面 filename: 'index.html' // 指定生成在內存的頁面的名稱 }) ], 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 規則 { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, { test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ }, ] } } ~~~ >[danger] ##### main.js -- 所有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' }) }); ~~~ >[danger] ##### 解惑 -- 為什么控制臺輸入指令后會執行打包 ~~~ 1.當我們想打包成實體文件在控制臺輸入 webpack 指令，當我們想執行在內存中 打包時候，在package.json 配置好指令直接運行npm run dev 2.當我們在控制臺輸入這兩個指令后webpack 或 webpack-dev-server 的時候，工 具會發現，我們并沒有提供 要打包 的文件的 入口 和 出口文件，此時，他會檢查 項目根目錄中的配置文件，并讀取這個文件，就拿到了導出的這個 配置對象，然 后根據這個對象，進行打包構建 。 3.簡單的說就是輸入指令后會去找webpack.config.js 文件，并且找到 module.exports暴露出來的配置。 ~~~ >[danger] ##### 細微配置 ~~~ 1.在 package.json 中 配置sprict 指令 2.配置好對應指令后 使用npm run dev 啟動 webpack-sever 3.使用webpack 進行打包 ~~~ >[danger] ##### 細節如何導入npm 下載文件中的css 文件，參考上個目錄中對字體配置的講解