wepack入门搭建相关命令记录

01初始化

npm init -y

02安装webpack及webpack-cli

npm install webpack webpack-cli –g

打包命令测试

webpack serve --mode development

安装所需loader

03添加样式文件

npm i style-loader css-loader --save--dev

04添加自动生成html

npm install --save-dev  html-webpack-plugin

05添加图片，非图片等引用

npm i url-loader file-loader --save--dev

06字体等其他loader

npm i html-loader --save--dev

07每次打包清除之前文件

npm i clean-webpack-plugin --save--dev

08服务器

npm install webpack-dev-server --save--dev

09安装es6语法相关

npm install --save-dev babel-loader babel-core

npm i @babel/core --save--dev

因为ES6语法每年都在更新，因此，我们需要一定的规则去转换。

npm install --save-dev babel-preset-latest？

安装vue相关

npm install vue vue-router --save--dev

npm i vue-template-compiler vue-loader --save--dev

安装轮播图

npm install vue-awesome-swiper swiper --save

安装axios

npm i axios

页面中调用数据格式

axios({

url:'',

method:'get',

params:{}

}).then(res=>{})

配置文件webpack.config.js

const path = require("path"); //调用node.js中的路径

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

const HtmlWebpackPlugin = require("html-webpack-plugin");

const VueLoaderPlugin = require("vue-loader/lib/plugin"); //vue-loade

module.exports = {

entry: {

index: "./learn/index.js" //需要打包的文件

},

output: {

filename: "build.js", //输入的文件名是什么，生成的文件名也是什么

path: path.resolve(__dirname, "../dist") //指定生成的文件目录

},

mode: "development",

devServer: {

static: "../dist"

},

plugins: [

// 我们要把哪个目录下的 html 进行自动生成。

new HtmlWebpackPlugin({ template: "./index.html" }),

new CleanWebpackPlugin(),

new VueLoaderPlugin()

],

module: {

rules: [

{

test: /\.vue$/,

loader: "vue-loader"

},

{

test: /\.js$/, // 使用正则来匹配 js 文件

exclude: /node_modules/, // 排除依赖包文件夹

use: {

loader: "babel-loader" // 使用 babel-loader

}

},

{

test: /\.css$/,

use: [

{ loader: "style-loader" },

{loader: "css-loader"}

]

},

{

test: /\.(png|jpg|gif)$/,

use: [

{

loader: "url-loader",

options: {

limit: 8 * 1024,

outputPath: "images/",

name: "[name].[ext]",

esModule: false

}

}

],

type: "javascript/auto"

},

{

test: /\.html$/,

loader: "html-loader"

}

]

}

};