webpack的学习记录(ing)

learn webpack

一步一步学习webpack,以此做为学习记录。一次小功能配置提交一次git。
动手敲一遍，过一遍文档印象会更加深入。 仓库地址

---

1. 解析.vue文件
   1.1 解析.vue文件须要 vue-loader (vue-loader V15版本以后须要vue-template-compiler)
   备注: 1.html-webpack-plugin会在webpack打包结束后,自动帮咱们生成一个HTML文件,并把打包生成的js自动引入到这个HTML文件中
   2.使用clean-webpack-plugin插件，能够在每次打包时候清理dist目录。

2. 解析css文件
   须要css-loader以及style-loader

rules: [
 {  test: /\.css$/,  use: [  { loader: 'style-loader' },  {  loader: 'css-loader',  options: {  modules: true  }  }  ]  }, ] 复制代码

3.解析less文件 须要css-loader、style-loader 、less-loader

rules: [
 {  test: /\.less$/,  use: ['style-loader', 'css-loader', 'less-loader']  } ] 复制代码

4.解析scss文件
须要安装node-sass以及sass-loader安装到devDependencies中，webpack中使用style-loader、css-loader、sass-loader

rules: [
 {  test: /\.scss$/,  use: ['style-loader', 'css-loader', 'sass-loader']  } ] 复制代码

5. webpack配置import的时候忽略文件后缀名
   配置extensions便可

resolve: {
 extensions: ['.js', '.vue'] }, 复制代码

使用示例：

import App from './App'
复制代码

5.webpack配置别名
使用别名引入文件能够更简短，例如能够直接

import Testcss from 'components/Testcss'
复制代码

配置方法：
参考官方文档

resolve: {
 alias: {  'components': resolvePath('src/components')  } }, 复制代码

本文使用 mdnice 排版