webpack搭建vue环境时报错异常解决

目录

• 首先是配置package.json
• 然后安装webpack工具
• 运行webpack测试
• 4.运行webpack测试
• 配置各种loader(文件解析器)

• （1）配置入口（entry）
• （2）配置出口（output）
• （3）配置加载器（loader）
• （4）配置插件（plugin）

//自动配置
  npm init -y

npm install webpack webpack-cli --save-dev
  //或者是npm i webpack webpack-cli -D也可以

抛出：modules.exports
引入：require

import xxx from ''
export default {}

cnpm i babel-loader @babel/core @babel/preset-env -D

npm i css-loader style-loader -D
cnpm i css-loader style-loader -D

npm i html-webpack-plugin -D
cnpm i html-webpack-plugin -D

module.exports = { entry:'./src/index.js' }

const path = require('path');
      module.exports = {
          // ...
          output: {
              path: path.resolve(__dirname, 'dist'),
              filename: 'main.js'
          }
      }

module.exports = {
    // ...
    module:{
        rules:[
            {
                test: /\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test: /\.js?$/, // jsx/js文件的正则
                exclude: /node_modules/, // 排除 node_modules 文件夹
                use:{
                    // loader 是 babel
                    loader: 'babel-loader',
                    options: {
                        // babel 转义的配置选项
                        babelrc: false,
                        presets: [
                            [require.resolve('@babel/preset-env'), {modules: false}]
                        ],
                        cacheDirectory: true
                    }
                }
            }
        ]
    }
}

const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
	// ...
	plugins:[
		new HtmlWebPackPlugin({
			template: 'public/index.html',
			filename: 'index.html',
			inject: true
		})
	]
}

npx webpack --mode development

//在 package.json 文件添加 build 项
{
    "scripts": {
        "build": "webpack --mode production"
    }
}

npm run build

cnpm i webpack-dev-server -D

module.exports = {
          // ...
          devServer: {
              contentBase: './dist',
              host: 'localhost',
              port: 3000
          }
      }

{
    "scripts": {
        "start": "webpack-dev-server --mode development --open"
    }
}

npm start

vue-loader:解析vue文件
      vue-template-compiler
      安装：npm install vue-loader vue-template-compiler -D
      配置webpack文件： {test:/\.vue$/,use:['vue-loader']},
      实例化vueLoaderPlugin插件
      const { VueLoaderPlugin }=require('vue-loader')
      添加插件实例化：
       },
          plugins: [
              new VueLoaderPlugin()
          ]

安装：npm install less-loader less -D
配置：
 module: {
        rules: [
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
        ]
    },

安装：npm install sass-loader node-sass -D
配置：
 module: {
        rules: [
            {test:/\.(scss|sass)$/,use:['style-loader','css-loader','sass-loader']},
        ]
    },

安装:npm install vue-router -D