webpack導入css及各項loader

1. webpack導入css

1) 下載相關的加載器 npm install style-loader css-loader -D

2）將index.css引入到mian.js中

import './css/index.css'

3) 配置webpack.config.js

使用module屬性

const path = require('path')

module.exports = {
    mode: 'development',
    entry:path.join(__dirname,'./src/main.js'),//打包的那個文件
    output:{
        path:path.join(__dirname,'./dist'),
        filename :'bundle.js'
    },
    devServer:{
        open:'true',
        port:'8081',
        contentBase:'src'
    },
    module:{ rules:[ test: {'/\.css$/',use['style-loader','css-loader']} ] }
}

重啟運行 `npm run dev`

      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, 

2.webpack導入圖片

由於導入圖片需要使用url地址，所以需要引入 `url-loader` 和 `file-loader` ( `file-loader` 依賴於 `url-loader` 所以需要一起引入)

npm i url-loader file-loader -D

.box{
  background-image:url('../Images/1.jpg')  
}

配置webpack.config.js

module:{ 
    rules:[ 
        {test:/\.css$/,use:['style-loader','css-loader']},
        {test:/\.(jpg|png|gif|bmp|jpeg)$/,use: 'url-loader?limit=4000&name=[hash:8]-[name].[ext]' },
　　　　 //如果圖片大於limit的大小則不會被解析成base64
        //name設置是否重命名圖片,  [name].[ext]是保持引入的時候的圖片的名字,[hash:8]-[name].[ext]是自動在圖片原名前加一個隨機的hash值，防止圖片重復
        ]
}

3.webpack中引入babel

對於部分瀏覽器不識別的高級的ES6語法，借助 `babel` 來轉化

npm install  babel-core  babel-loader  babel-plugin-transform-runtime  -D   //轉換工具

npm install  babel-preset-env  babel-preset-stage-0  -D   //語法

在webpack.config.js中配置

module:{ 
  rules:[
        {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
        //exclude是去掉不需要轉換的包 
　　]
}

在項目的根目錄下新建 `.babelrc` 的 `babel` 配置文件(JSON格式，需要符合JSON規范)

{
    "plugins":["transform-runtime"],
    "presets":["env","stage-0"]
}

4.webpack中使用模板，需要解析.vue文件

npm install vue-loader vue-template-compiler -D

在webpack.config.js中的配置

const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
　　plugins:[ 　　　　new VueLoaderPlugin(), 　　],
　　module:{
　　　　rules:[
　　　　　　{test:/\.vue$/,use:'vue-loader'},
　　　　]　　
　　},
}

高版本的webpack使用vue-loader的時候都需要配置下插件（標藍部分）