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 排版