webpack:^4.x.x打包单页面或多页面应用

注意事项

1.切记一个项目中cnpm切不可与npm交叉使用，安装依赖选用cnpm即可。

(-D代表–save-dev，安装在devDependencies中。-S代表–save)

cnpm i css-loader style-loader -D

cnpm i css-loader style-loader -S

2.安装的依赖或者插件，对于版本有要求的，尽量一条命令进行安装

原因： 主要是解决版本不匹配的问题
例如：安装babel

在webpack 4.2以上使用：

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

单页面/多页面应用构建，webpack打包基本流程

新建一个项目文件夹，并进入

• 初始化一个package.json

npm init

• cnpm安装webpack工具
• 项目根目录新建webpack.config.js文件

- 单页面webpack.config.js示例

	1. module.exports中exports带s；
	2. output输出文件路径必须为绝对路径；

var path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
   //exports带s
    entry:'./src/index.js',
    output:{
   
        path:path.join(__dirname,'./dist'),//指定绝对路径
        filename:'vue-toast-demo.js',
        libraryTarget: "umd",//指定文件加载格式,umd打包后支持多种加载方式
        library:"VueToastDemo",//指定打包库的名字
    },
    mode: 'development', // 设置mode
    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin()
    ],
    module:{
   //模块解析器
        rules:[//指定需要解析的文件
            {
   
                test: /\.scss$/,</