サイトローダー
ヴュー・ローダーはローダーです、JSモジュールを.vueするファイルを変換することができます。
NPMインストール-Dショックショックローダテンプレートコンパイラを
// webpack.config.jsの
constのVueLoaderPlugin = 必要（'VUE-ローダ/ libに/プラグイン'）
モジュール。輸出= {
モジュール：{
ルール：[
{
テスト：/\.vue$/、
ローダ：'VUEローダ'
}
]
}、
プラグイン：[
新しいVueLoaderPlugin（）
]
}
CLI見ます
WebPACKの構成を調整中で最も簡単な方法でvue.config.jsあるconfigureWebpackオブジェクトのオプションを提供します：
//はvue.config.js
モジュールを。輸出= {
configureWebpack：{
プラグイン：[
新しいMyAwesomeWebpackPlugin（）
]
}
}
注意：一部のオプションは、値vue.config.jsのWebPACKが設定されているに基づいており、それが直接変更することはできません。
あなたは条件付きベースの環境の動作を設定する必要がある、またはあなたが直接、設定を変更したい場合は、機能に置き換えられます。
Vue.config.js //
Module1を。輸出= {
configureWebpack：設定=> {
IF（ 。プロセス。ENV NODE_ENV === '生産'）{
//本番環境の設定を変更...
} 他{
の開発のための//環境設定を変更...
}
}
}
VueのCLI WebPACKの内部構成はであるWebPACKのチェーンメンテナンス。あなたは直接、より自由度の高い設定さWebPACKのを修正するよりも、このルールによって命名され、名前のプラグインAPIローダーを定義することができます。
SASS-ローダー
NPMインストール-D SASS-ローダーノード-SASSを
構成ルールでwebpack.config.js
モジュール。輸出= {
モジュール：{
ルール：[
{
テスト：/\.scss$/、
使用：[
'VUEスタイルローダ'、
'CSS-ローダ'、
'SASSローダ'
]
}
]
}
}
SASS-ローダーは、処理がSCSS構文インデントに基づいていないデフォルト設定されます。使用するためにはのSASSに基づくインデント文法を、あなたはローダにオプションを渡す必要があります。
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
indentedSyntax: true
}
}
]
}
sass-loader 也支持一个 data 选项，这个选项允许你在所有被处理的文件之间共享常见的变量，而不需要显式地导入它们。
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
data: `$color: red;`
}
}
]
}
less-loader
npm install -D less less-loader
{
test: /\.less$/,
use: [
'vue-style-loader',
'css-loader',
'less-loader'
]
}
Stylus-loader
npm install -D stylus stylus-loader
{
test: /\.styl(us)?$/,
use: [
'vue-style-loader',
'css-loader',
'stylus-loader'
]
}
Babel-loader
npm install -D babel-core babel-loader
{
test: /\.js$/,
loader: 'babel-loader',
exclude: file => (
/node_modules/.test(file) &&
!/\.vue\.js/.test(file)
)
}
Babel 的配置可以通过 .babelrc 或 babel-loader 选项来完成。
有一些不需要进行打包处理的文件，可以通过使用一个排除函数将它们加入白名单。
ts-loader
npm install -D typescript ts-loader
module.exports = {
resolve: {
// 将 .ts 添加为一个可解析的扩展名。
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
loader: 'ts-loader',
options: { appendTsSuffixTo: [/\.vue$/] }
}
]
},
}
TypeScript 的配置可以通过 tsconfig.json 来完成。
ESLint
npm install -D eslint eslint-loader
module.exports = {
module: {
rules: [
{
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /node_modules/
}
]
}
}