一、.vue用loader,.css用use，style-loader把css写到html中，css-loader便于webpack处理css文件.

二、loader是可以配置一些选项的。

三、url-loader可以把图片转换成base-64代码，编写在js中，limit:1024，如果图片大小小于1024，就编译成base-64。

四、npm i style-loader url-loader file-loader, url-loader依赖于file-loader。

五、css预处理器:stylus

六、npm i stylus-loader

七、sass,less都可以在webpack中配置相关的loader

一、vscode直接打开命令行：control+`(esc下面的按键)

二、webpack、vue项目

1、npm init：初始化npm 项目。

2、npm i webpack vue vue-loader (i代表install)：不区分dev-dependency，和dependency

3、npm i css-loader vue-template-compiler(2安装完后，提示需要安装的依赖，3完成安装)

三、组件不能直接挂载到html中。

四、render接收h参数，这个参数实际上是vue里的creatApp，通过它把app挂载到html中，render是渲染内容，如果是要挂载，还要用$mount.

五、package.json里的scripts加上"build": "webpack --config webpack.config.js"，这样才会调用项目里的webpack，如果是输命令，会调用全局的webpack。

六、npm run build ,报错：you may need an appropriate loader to hand this file type.

需要为.vue文件类型声明一个loader(vue-loader).

webpack原生只支持js.

七、把零碎的js 打包成一个，可以减少http请求。

一、前端的价值：

1、搭建前端工程：数据缓存、es6和less（可以加快开发效率）。

2、网络优化：http(所有静态资源都是通过http请求的)。

3、api定制。

4、node.js层。

二、vue-cli生成的项目就是基于webpack的前端工程。

npm i cross-env css-loader file-loader html-webpack-plugin style-loader stylus stylus-loader url-loader vue vue-loader vue-template-compiler webpack webpack-dev-server

直接把所有 用到的 包 装了最新的  

{

"name": "vue-ssr-tech",

"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.4",

"css-loader": "^0.28.11",

"file-loader": "^1.1.11",

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

"style-loader": "^0.21.0",

"stylus": "^0.54.5",

"stylus-loader": "^3.0.2",

"url-loader": "^1.0.1",

"vue": "^2.5.16",

"vue-loader": "^14.2.2",

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

"webpack": "^4.6.0",

"webpack-dev-server": "^3.1.3"

},

"devDependencies": {

"webpack-cli": "^2.0.14"

}

}

a

npm i webpack-dev-server  //安装webpack-dev-server

• 这里有一个坑？

我的项目  firstVue 同样是报错，写了rules了，还是未解决

不知道与版本有没有关系

可以考虑安装stylus的插件，用VS code写起来会非常的爽...

使用loader的options定义一些额外的条件

// 如果图片资源小于1024kb,则将其转化为base64代码写入.

limit: 1024 

"build": "webpack --config webpack.config.js"

// 添加一个脚本.使得运行build命令实际上是运行局部安装在当前项目下的webpack.