limit把图片小于1024的转成base64

纠正上节课的写法问题

需要为vue这种类型的文件声明一个loader

entry不要拼错了，entry用来设置入口文件路径

调用方法在package文件中配置建立好的webpack指令需要这样写才能调用我们自己建立后的webpack文件

output配置输出的路径filename是文件名path是输出的文件夹

entry是入口的配置将刚刚的入口文件打包

构建入口文件通过mount输出到html里

拼接绝对路径dirname是根目录路径

插件

一、设置环境变量标识 现在是开发环境还是正式环境  

涉及的包  cross-env

配置  cross-env NODE_ENV=production        cross-env NODE_ENV=development

"scripts": {

    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",

    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

  },

webpack.config.js中的配置

const isDve = process.env.NODE_ENV === 'development'

if(isDve) {

    config.devServer = {

        port: 8000,

        host: '0.0.0.0',

        overlay: {

            errors: true,

        }

    }

}

二、html-webpack-plugin 插件  

webpack.config.js中的配置

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

plugins: [

        new HTMLPlugin()

    ]

三、判断环境、区分打包

const { webpack } = require('webpack')

css 预处理器 styl

vscode插件安装：

一、webpack 打包优化：

1、网络优化： 减少Http请求、压缩静态资源文件、使用浏览器的长缓存使应用的流i量变得更小加载速度更快

二、

包的配置

包的配置

相关包的配置

安装的项目包，

其它的loader的配置

package.json里面项目的配置

use:指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
fallback:编译后用什么loader来提取css文件
publicfile:用来覆盖项目路径,生成该css文件的文件路径

npm init

npm i webpack vue vue-loader

npm i css-loader vue-template-compiler

package.json按照视频课程修改版本

并且

查看评论后一个一个自己尝试，得到可以运行的版本

{

  "name": "vue-todo",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",

    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

  },

  "author": "",

  "license": "ISC",

  "dependencies": {

    "cross-env": "^5.1.3",

    "css-loader": "^0.28.7",

    "file-loader": "^1.1.6",

    "html-webpack-plugin": "^2.30.1",

    "style-loader": "^0.19.1",

    "stylus": "^0.54.5",

    "stylus-loader": "^3.0.1",

    "url-loader": "^0.6.2",

    "vue": "^2.5.13",

    "vue-loader": "^13.6.0",

    "vue-template-compiler": "^2.5.13",

    "webpack": "^3.1.0",

    "webpack-dev-server": "^2.9.1"

  },

  "devDependencies": {

    "webpack-dev-server": "^2.9.1"

  }

}

插件

一、前端的价值：1、搭建前端工程：数据缓存、es6和less（可以加快开发效率）。2、网络优化：http(所有静态资源都是通过http请求的)。3、api定制。4、node.js层。二、vue-cli生成的项目就是基于webpack的前端工程。

vue工程的搭建

 npm init

1、npm i webpack vue vue-loader

2、npm i css-loader vue-template-compiler

3、新建src目录并在src下新建app.vue

4、在app.vue中编写vue组件

5、在根目录下新建webpack.config.js

        // // 2.2以下版本（2.1-） plugins要写在module.exports.module里面

        // plugins: [

        //     new HtmlWebpackPlugin({

        //         template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数

        //     })

        // ],

    },

    //2.2+以上版本 plugins要写在module.exports.module外面(即module.exports里面)

    plugins: [

        new HtmlWebpackPlugin({

            template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数

        })

    ],

原文链接：https://blog.csdn.net/jiajia199470/article/details/77100466

Module build failed (from ./src/index.js):

C:\aboutHtml\pro_demo\src\index.js:1

(function (exports, require, module, __filename, __dirname) { import Vue from 'vue'

                                                              ^^^^^^

SyntaxError: Cannot use import statement outside a module

 错误解决：

添加module ：

    module:{

        rules:[

            {

                test: /.js$/,

                loader: 'babel-loader',

                exclude: /node_modules/

            },

            {

            test: /.vue$/,

            loader: 'vue-loader'

        }

    ]

    },

导入模块：

npm install babel

npm install babel-core

npm install babel-loader@7.1.5

 页面分成不同的组件

 vue和webpack的配置和使用 

styles 

初始化项目npm init

安装需要的包npm install webpack Vue Vue-loader

安装需要的依赖 npm i css-loader vue-template-compiler

新建文件夹src 放置编码

.vue文件是vue的特殊开发方式；是一个组件不能直接挂载到html中

需要新建index.js文件

新建文件webpackconfig.js 打包前端资源

运行npm run build