Webpack的基礎(chǔ)配置以及使用腳手架創(chuàng)建工程

文章目錄

• Webpack的基礎(chǔ)配置以及使用腳手架創(chuàng)建工程
• • 一、模塊化
  • 二、webpack
  • • 1.在項目中安裝webpack
    • 2.完成更加復(fù)雜的打包工作（css文件）
    • 3. 完成更加復(fù)雜的打包工作（scss/less文件）
    • 4.完成對圖片的打包
    • 5.將index.html文件拷貝到dist中
    • 6. 服務(wù)器工具 (將bundle.js 和index.html打包到了內(nèi)存中)
  • 三、webpack在Vue項目中使用
  • 四、腳手架搭建工程
  • 五、將代碼自動保存成ESLint規(guī)定的代碼
  • 六、使用UI界面化進行創(chuàng)建工程

一、模塊化

Nodejs（require、module.exports）

ES6 (import、export)

二、webpack

是一個打包工具。

1.在項目中安裝webpack

• npm init -y

  初始化工程化。這個命令完成之后，會在項目中創(chuàng)建一個package.json文件（包管理文件）

• 下載webpack

  npm install webpack webpack-cli --dev (development -- 開發(fā)階段使用的包) npm i webpack webpack-cli -D

• package.json 文件中scripts

  "scripts": {"build": "webpack" }

2.完成更加復(fù)雜的打包工作（css文件）

• 在項目中添加 webpack.config.js 文件

  module.exports = {entry: "./src/index.js",output: {path: path.resolve(__dirname, "dist"),filename: "bundle.js"} }

• 對css文件處理

  npm install style-loader css-loader -D

• 配置webpack.config.js

  module.exports = {entry: "./src/index.js",output: {path: path.resolve(__dirname, "dist"),filename: "bundle.js"},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"]}]} }

  3. 完成更加復(fù)雜的打包工作（scss/less文件）

• 安裝less、less-loader

  npm install less less-loader -D

• 配置webpack.config.js

  module.exports = {entry: "./src/index.js",output: {path: path.resolve(__dirname, "dist"),filename: "bundle.js"},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"]},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"]}]} }

4.完成對圖片的打包

• 安裝ulr- loader和file-loader

  npm install url-loader file-loader -D

• 配置webpack.config.js

  module.exports = {entry: "./src/index.js",output: {path: path.resolve(__dirname, "dist"),filename: "bundle.js"},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"]},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"]},{test: /\.(jpg|png|gif|jpeg|webp|svg|woff)$/,use: "url-loader" // url-loader 會自動調(diào)用file-loader}]} }

5.將index.html文件拷貝到dist中

• 插件 （html-webpack-plugin）

  npm install html-webpack-plugin -D

• 配置webpack.config.js

  const htmlWebapckPlugin = require("html-webpack-plugin") module.exports = {entry: "./src/index.js",output: {path: path.resolve(__dirname, "dist"),filename: "bundle.js"},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"]},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"]},{test: /\.(jpg|png|gif|jpeg|webp|svg|woff)$/,use: "url-loader" // url-loader 會自動調(diào)用file-loader}]},plugins: [new htmlWebpackPlugin({template: './index.html'})] }

6. 服務(wù)器工具 (將bundle.js 和index.html打包到了內(nèi)存中)

• 安裝

  npm install webpack-dev-server -D

• 配置package.json

  "scripts": {"dev": "webpack-dev-server","serve": "webpack-dev-server" }

三、webpack在Vue項目中使用

npm install vue@2 --save(在開發(fā)和上線階段都要使用)

npm install vue-loader@15 vue-template-compiler -D

四、腳手架搭建工程

Vue-cli是vue官方出品的快速構(gòu)建單頁應(yīng)用的腳手架，能讓我們更快的開始項目。

首先我們切換最新的淘寶鏡像

npm config set registry https://registry.npmmirror.com

• 下載腳手架工具

  npm install @vue/cli -gvue --version

• 使用腳手架安裝工程`

  vue create 工程名稱

  詳細配置根據(jù)項目需要，更建議使用Vue UI配置

五、將代碼自動保存成ESLint規(guī)定的代碼

• 要安裝ESLINT插件

• 要將工程的根目錄放入vscode進行開發(fā)

• 升級VScode到最新版本

• 在首選項-> 設(shè)置->setting.json

  "eslint.autoFixOnSave": true,"eslint.validate": ["javascript","javascriptreact",{"language": "html","autoFix": true},{"language": "vue","autoFix": true}],"editor.codeActionsOnSave": {"source.fixAll.eslint": true}

• 重啟Vscode

六、使用UI界面化進行創(chuàng)建工程

? vue ui

總結(jié)

以上是生活随笔為你收集整理的Vue2，Webpack的基础配置以及使用脚手架创建工程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。