vue2 使用webpack手动创建项目结构

使用webpack手动创建项目结构

初始化包管理配置文件

npm init -y

在项目中安装 webpack webpack-cli

npm install webpack webpack-cli -D

配置打包的入口与出口

const path = require('path')
module.exports = {
  mode:'development',
  entry:path.join(__dirname,'./src/main.js'),
  output:{
    path:path.join(__dirname,'./dist'),
    filename:'bundle.js'
  }
}

配置webpack的自动打包功能

npm install webpack-dev-server -D`

配置html-webpack-plugin生成预览页面

npm install html-webpack-plugin -D`

const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({
  template:'./index.html',
  filename:'index.html'
})
module.exports = {
  plugins:[htmlPlugin]
}

配置loader

• css

  npm install style-loader css-loader -D
  

  module.exports = {
    module:{
      rules:[
        {test:/\.css$/,use:['style-loader','css-loader']}
      ]
    }
  }
  

• less

  npm install less-loader less -D
  

  module.exports = {
    module:{
      rules:[
        {test:/\.less$/,use:['style-loader','css-loader','less-loader']}
      ]
    }
  }
  

• sass

  npm install sass-loader node-sass -D
  

  module.exports = {
    module:{
      rules:[
        {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
      ]
    }
  }
  

• postcss(兼容)

  npm install postcss-loader autoprefixer@8.0.0 -D
  

  const autoprefixer = require('autoprefixer')
  module.exports = {
    plugins:[autoprefixer],
    module:{
      rules:[
        {test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}
      ]
    }
  }
  

• url

  npm install url-loader file-loader -D
  

  module.exports = {
    module:{
      rules:[
        {test:/\.jpg|jpeg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:'url-loader?limit=20000'
      ]
    }
  }
  

• js

  npm install babel-loader @babel/core @babel/runtime -D
  npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
  

  //  新建 babel.config.js
  module.exports = {
    presets:['@babel/preset-env'],
    plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
  }
  //  在 webpack.config.js 中添加
  {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
  

• vue

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

  //  webpack.config.js
  const VueLoaderPlugin = require('vue-loader/lib/plugin')
  module.exports = {
    module:{
      rules:[
        {test:/\.vue$/,loader:'vue-loader'}
      ]
    },
    plugins:[new VueLoaderPlugin()]
  }
  

安装vue vue-router

npm install vue vue-router -S