webpack使用过程中所遇到的相关问题
1.webpack runoob1.js -o bundle.js
2.webpack搭建出现的问题
webpack4.0.1安装问题
1、Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
解决办法：将loaders改为rules webpack版本问题
2、The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D
解决办法：全局安装webpack-cli
npm install webpack-cli -g
3、DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
/usr/local/lib/node_modules/webpack/lib/Chunk.js:460
解决办法：cnpm install extract-text-webpack-plugin@next
4.安装babel:cnpm install --save-dev babel-loader babel-core
安装latest:cnpm install --save-dev babel-preset-latest
// query:{
// //presets是告诉loaders怎么处理js,给不同的特性
// presets:['latest']
// }
"babel":{
"presets":["latest"]
},
5.如何优化打包时间：打包速度慢是因为babel-loaders上,babel-loaders非常耗时的语法转换，改善：使用exclude和include
6.绝对路径：const path = require('path');
//路径解析，__dirname是在运行环境下的变量，也是在当前运行环境的路径，'./dist'相对路径，我带着当前的环境，当前的目录，再给一个相对路径，然后解析完以后就可以得到一个绝对路径
path: path.resolve(__dirname, './dist'),
7.安装css,style
解决浏览器兼容为css添加前缀postcss-loader:
安装：cnpm install postcss-loader --save-dev
加浏览器前缀安装：cnpm install autoprefixer --save-dev
8.loader:'style-loader!css-loader!postcss-loader'
使用@import引入的样式设置,importLoaders表示cssloader之后指定几个数量的loader来处理import进来的资源
loader:'style-loader!css-loader?importLoaders=1!postcss-loader'
9.处理less,sass
安装npm install less-loader --save-dev
缺失less时安装less:npm i less
loader的处理方式是从右到左
10.处理模板文件的几种做法：（模板语法，模板引擎）
安装：npm install html-loader --save-dev
1.使webpack将模板文件当做字符串处理
2.把模板文件当成已经编译好的模板的处理函数
11.安装ejs-loader:npm install ejs-loader --save-dev
比较流行的loader:jsx,ractive
12.处理项目中的图片文件分几种情况：
1.可能css里面有很多背景图片
2.模板文件结构中直接引用图片
3.最根部的Html文件也会对图片文件进行引用
方法一(fill-loader):
安装：npm install fill-loader --save-dev
绝对路径的文件无论背景还是模板都会被处理
改变图片打包后的输出地址：query:{
name:'assets/[name]-[hash:5].[ext]'
}
方法二（url-loader):
安装：npm install url-loader --save-dev
类似file-loader，但是它可以指定一个参数limit,可处理图片和文件，当图片或文件的大小大于指定的limit后，它会直接丢给file-loader去处理，当小于设定的大小限制时它会把图片和文件转为...，就不再是一个url,直接变成一段编码
两种方法各有优劣：通过http请求载入过来的图片可以使浏览器享受到一个优势，就是图片的缓存，当图片的重复性非常高的时候，通过使用httpRequest会给访问增加一些缓存的便利，如果是通过baseduse载入图片，相当于只要在任何一个地方引用到这个图片的时候，那个地方都会一份同样大小的baseduse的编码存在，从某种程度上来说，会导致代码的一些冗余，会增加代码的体积，通过url-loader将小于一定大小的图片变成代码后，对于一些http请求的文件应该如何压缩，可以用到image-webpack-loader
安装image-loader:npm install image-webpack-loader --save-dev