从零开始搭建脚手架

1.md创建一个文件夹，npm init -y

2.创建一个src文件夹，在里面创建一个index.js , index.js是一个主入口

3.创建一个public文件夹，在里面创建一个index.html

4.安装 npm install --save-dev webpack
npm install --save-dev webpack-cli

5.在项目的根目录加一个配置文件webpack.config.js
module.exports = {
entry: “./src/index.js”, //如果文件 可以修改

}

6.在package.json中配置script中加入
“scripts”: {
“build”: “webpack --mode production”,
“test”: “echo “Error: no test specified” && exit 1”
},

production 可以换成development 生产模式(线上要压缩处理)和开发模式(本地随便写)
想测试一下的话cd进入dist文件，跑npm run build

7.在webpack.config.js中设置出口文件
var path = require(“path”);

module.exports = {
entry: “./src/index.js”, //如果文件 可以修改
output: {
path: path.resolve(__dirname, “dist”),
filename: “leson.js”
}
}

也可以个配置出口进行hash混淆 指定hash长度 hash:8 就表示长度为8
output: {
path: path.resolve(__dirname, “dist”),
filename: “[name].[hash:8].js”
}

8.在根目录下安装插件html-webpack-plugin 进行页面js自动引入更新
就会将指定的模板页面和指定的js引入生成到指定地方中去

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

9.在webpack.config.js中引入插件
var HtmlWebpackPlugin = require(“html-webpack-plugin”);

10.在webpack.config.js中配置,写完之后可以npm run bulid
plugins: [
new HtmlWebpackPlugin({
title: “webpack”,
template: “public/index.html”,
chunks: [‘main’]
}),
]

11,在public的index.html中的修改title

12在src中新建css文件，在index.js中引入index.css (import “. /css/index.css”)

13.引入css-loader

npm install --save-dev css-loader
npm install --save-dev style-loader

14.webpack.config.js中配置，写完之后npm run build

module: {
rules: [
{
test: /.css$/i,
use: [‘style-loader’, ‘css-loader’],
},
],
}
然后运行 npm run build
但是css的引入会在js中 需要分离 才符合正常的阅读习惯
安装 npm install --save-dev mini-css-extract-plugin

15.在webpack.config.js中引入
var MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);

第一步引入
var MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);

第二步配置
new HtmlWebpackPlugin({
title: ‘webpacktitle’,
template: “public/index.html”,
chunks: [‘main’]
}),
new MiniCssExtractPlugin({
filename: ‘[name].[hash].css’
})

第三步修改配置
rules: [{
test: /.css$/i,
use: [MiniCssExtractPlugin.loader, ‘css-loader’]
}, ]

16.启动服务,安装 服务
npm install webpack-dev-server --save-dev
ps:基于express的服务器

17.在package.json中修改
“scripts”: {
“build”: “webpack --mode production”,
“serve”: “webpack-dev-server --mode production”,
“test”: “echo “Error: no test specified” && exit 1”
},

启动命名 npm run serve就可以启动启动服务

自定义端口

在webpack.config.js配置中
devServer: {
contentBase: ‘./dist’,
port: 1234,
open: true,
hot:true//热启动
}

17.安装 sass
npm install sass-loader node-sass --save-dev

18.webpack.config.js配置中加入 sass 重新编译就可以了
{
test: /.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader,
‘css-loader’,
‘sass-loader’,
],
},

19.安装npm install url-loader --save-dev小图片的处理

      {
    test: /\.(png|jpg|gif)$/i,
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: false,
          name: '/[name].[hash:8].[ext]'
        },
      },
    ],
  },

大图片就应该使用file-loader
安装 npm install file-loader --save-dev

配置
{
test: /.(png|jpe?g|gif)$/i,
use: [
{
loader: ‘file-loader’,
},
],
},

20.安装转换插件

npm install --save-dev babel-loader @babel/core @babel/preset-env

21.配置 在rules中

{
test: /.js$/,
exclude: /node_modules/, // 排除的目录
// 使用babel-loader将ES6代码转为ES5，做浏览器兼容
// 同时需要建立.babelrc文件，调用@babel/preset-env插件将E6转为E5S
loader: “babel-loader”
}

22.根目录下新建一个.babelrc的文件 里面写入
{
“presets”: ["@babel/preset-env"]
}

重新编译在看效果 又es6的地方都变成了es5的写法

23.配置vue项目解析vue文件
安装vue npm i vue --save

在main.js中引入vue
import Vue from “vue”;

new Vue({
el:"#app",
data:{
username:“leson”
}
})
页面处

{{username}}

在webpack.config.js中配置正确路径

main.js

App.vue

24.安装用来识别.vue的文件

npm i vue-loader vue-template-compiler -D

25.在webpack.config.js引入
const VueLoaderPlugin = require(‘vue-loader/lib/plugin’);

26.插件配置中加入
new VueLoaderPlugin() 只加入这个即可
完整的如下

27.在规则relus中加入
{
test:/.vue$/,
use:[“vue-loader”]
}