webpack中使用vue实战-2(项目准备工作)

目录

一.安装vue包

二.安装和配置loader

1.安装处理css的css-loader

2.安装处理less的less-loader

3.安装处理js高级语法的babel-loader

4.安装处理vue的vue-loader

5.安装处理图片的url-loader(webpack5中已废弃)

---

一.安装vue包

npm install -S vue

二.安装和配置loader

安装并配置一些基本的loader,项目中会用到

1.安装处理css的css-loader

npm install -D style-loader css-loader

webpack.config.js

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

2.安装处理less的less-loader

npm install -D less less-loader

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        loader: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },
};

3.安装处理js高级语法的babel-loader

• 方式一

npm install -D babel-loader @babel/core @babel/preset-env webpack

 webpack.config.js

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

 Babel 对一些公共方法使用了非常小的辅助代码，比如 _extend。默认情况下会被添加到每一个需要它的文件中。

你可以引入 Babel runtime 作为一个独立模块，来避免重复引入。

下面的配置禁用了 Babel 自动对每个文件的 runtime 注入，而是引入 @babel/plugin-transform-runtime 并且使所有辅助代码从这里引用。

更多信息请查看 文档。

注意：你必须执行 npm install -D @babel/plugin-transform-runtime 来把它包含到你的项目中，然后使用 npm install @babel/runtime 把 @babel/runtime 安装为一个依赖。

rules: [
  // 'transform-runtime' 插件告诉 Babel
  // 要引用 runtime 来代替注入。
  {
    test: /\.m?js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env'],
        plugins: ['@babel/plugin-transform-runtime']
      }
    }
  }
]

• 方式二

使用.babelrc配置文件(本质是一个json文件)

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

webpack.config.js

module: {
	rules: [
		{
			test: /\.js$/,
			exclude: /node_modules/,
			use: {
				loader: "babel-loader",
			},
		}
	],
},

.babelrc

{
	"presets":["@babel/preset-env"],
	"plugins":[
		["@babel/plugin-transform-runtime"]
	]
}

4.安装处理vue的vue-loader

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

Vue Loader 的配置和其他的 loader 有点不同。除了适用vue-loader于任何扩展名为 的文件的规则之外.vue，请确保将 Vue Loader 的插件添加到您的 webpack 配置中：

webpack.config.js

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [
      // ... other rules
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // make sure to include the plugin!
    new VueLoaderPlugin()
  ]
}

5.安装处理图片的url-loader(webpack5中已废弃)

npm install -D url-loader file-loader

url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。

 webpack.config.js

module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }

到此为止,完整的webpack.config.js文件内容如下

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {VueLoaderPlugin} = require('vue-loader')

module.exports = {
    mode: 'development',
    devtool: 'inline-source-map', //将编译后的代码映射回原始源代码
    entry: './src/main.js',
    output: {
        filename: '[name].[contenthash:8].js', //打包后文件名
        path: path.resolve(__dirname, 'dist'),
        clean: true, //在每次构建前清理 /dist 文件夹
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html', //打包的文件
            title: 'webpack-vue',
            filename: "index.html", //打包后的名称
        }),
        new VueLoaderPlugin(),
    ],
    module: {
        rules: [			
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.(jpg|png|gif|svg)$/,use:'url-loader?limit=8192&name=[hash:8]-[name].[ext]'},
            {test:/\.(ttf|woff|svg|eot)$/,use:'url-loader'},
            {test:/\.vue$/,use:'vue-loader'},
            {test:/\.js$/,use:"babel-loader",exclude:/node_moudles/} ],
    },


};

在 webpack 5 之前，通常使用：

raw-loader 将文件导入为字符串
url-loader 将文件作为 data URI 内联到 bundle 中
file-loader 将文件发送到输出目录
资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。 

由于webpack5中已经废弃了 url-loader,因此需要稍微修改一下webpack.config.js如下:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {VueLoaderPlugin} = require('vue-loader')

module.exports = {
    mode: 'development',
    devtool: 'inline-source-map', //将编译后的代码映射回原始源代码
    entry: './src/main.js',
    output: {
        filename: '[name].[contenthash:8].js', //打包后文件名
        path: path.resolve(__dirname, 'dist'),
        clean: true, //在每次构建前清理 /dist 文件夹
        assetModuleFilename: 'images/[hash:6]-[name][ext][query]', // 指定导出的文件名,只有asset/resource才可以指定文件名
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html', //打包的文件
            title: 'webpack-vue',
            filename: "index.html", //打包后的名称
        }),
        new VueLoaderPlugin(),
    ],
    module: {
        rules: [			
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test: /\.s[ac]ss$/,use: ['style-loader','css-loader','sass-loader']},
            //自动地在 resource 和 inline 之间进行选择：小于 4kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类型。
            {test:/\.(jpg|png|gif|svg|jpeg)$/,type: 'asset',parser: {dataUrlCondition: {maxSize: 4 * 1024}}},
            {test:/\.(ttf|woff|svg|eot)$/,type: 'asset/inline',},
            {test:/\.vue$/,use:'vue-loader'},
            {test:/\.js$/,use:"babel-loader",exclude:/node_moudles/} ],
    },


};

到此为止,完整的packag.json如下

{
  "name": "webpack-vue",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --open --port 3000",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/plugin-transform-runtime": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/runtime": "^7.15.3",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.2",
    "less": "^4.1.1",
    "less-loader": "^10.0.1",
    "style-loader": "^3.2.1",
    "vue-loader": "^15.9.8",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "vue": "^2.6.14"
  }
}