``` npm i vue-loader -D npm i vue-template-comipler -D //用來解析vue模板,vue-loader會自動調用 ``` ``` // const docsLoader = require.resolve('./doc-loader'); module.exports = (isDev) => { return { //清楚單文件組件模板中的空格 preserveWhiteSpace: true //將所有單文件組件的css打包到抽離出的那個單獨的css文件中 //默認是和組件綁定的，這是為了讓異步加加載更完美(類似于styled-components) , extractCSS: !isDev //Vue的單文件組件的css默認并不支持熱更新 //需要->vue-style-loader(-D)替代style-loader //css模塊化 , cssModules: { localIndentName: isDev ? '[path]-[name]-[hash:base64:5]' : '[hash:base64:5]' //默認為串燒，這里改成小駝峰命名，便于js操作 , camelCase: true } //一般不用 因為一般會用postcss.config.js單獨配置 // ,postcss //熱加載 //但無法限制單位件組件的css的熱加載 , hotReload: isDev //Vue單文件組件內一般有3個模塊，template、script、style //，想要解析他們，都可以設置對應的loader //，除此之外也可以自定義模塊 //，這時候想要解析也需要對應的loader , loaders: { // js // ,html // ,style // ,'docs':docsLoader } //vue調用babel-loader之前 //比如Type-script , preLoader: {} //Vue指定loader解析完之后 , postLoader: {} }; }; ```