[js高手之路]深刻淺出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法

時間 2019-11-14

標籤高手之路深刻 webpack 教程系列 babel loader css style 用法欄目 JavaScript 简体版

原文原文鏈接

[js高手之路]深刻淺出webpack教程系列索引目錄：css

什麼是loader呢，官方解釋爲文件的預處理器，通俗點說webpack在處理靜態資源的時候，須要加載各類loader,好比，html文件，要用html-loader, css文件要用css-loader,style-loader等等.html

官方參考文檔：https://webpack.js.org/loaders/node

咱們從本文開始，從新搭建一個項目結構來解釋下loader的用法.webpack

1、項目結構搭建準備：es6

目錄結構：web

 1 demo3
 2     dist
 3     src
 4         components
 5             modal.html
 6             modal.js
 7             modal.less
 8         main.js
 9     index.html
10     package.json
11     webpack.config.js

須要安裝的插件等：npm

1，npm init --yes( 初始化項目的package.json )json

2，npm install webpack@3.5.6 -g ( 全局安裝webapck )數組

3，npm install webpack@3.5.6 --save-dev (局部安裝webpack )瀏覽器

4，npm install html-webpack-plugin --save-dev ( 安裝html-webpack-plugin插件 )

相關的文件代碼：

webpack.config.js代碼

 1 var htmlWebpackPlugin = require('html-webpack-plugin');
 2 module.exports = {
 3     entry : './src/main.js',
 4     output : {
 5         path : __dirname + '/dist',
 6         filename : 'js/[name].bundle.js',
 7     },
 8     plugins : [
 9         new htmlWebpackPlugin({
10             filename : 'index.html',
11             template : 'index.html',
12             inject : true
13         })
14     ]
15 }

main.js文件代碼:

1 import modal from './components/modal.js';
2 let App = function(){
3     console.log( '項目入口文件main.js' );
4 }
5 new App();

modal.html文件代碼:

1 <div class="modal">
2     <div class="modal-heading">模態框頭部 - by ghostwu</div>
3     <div class="modal-body">模態框內容部分 - by ghostwu</div>
4 </div>

modal.js文件代碼:

2 let modal = function(){
3     return {
4         'component-name' : 'modal'
5     }
6 }
7 export default modal;

modal.less文件代碼:

 1 @c1 : #09f;
 2 @c2 : #666;
 3 .modal {
 4     padding:20px;
 5     div {
 6         margin: 10px;
 7     }
 8 }
 9 .modal-heading {
10     background:@c1;
11 }
12 .modal-body {
13     background:@c2;
14 }

寫完上面的結構和代碼以後，咱們開始執行webpack打包命令，而後安裝babel-loader，把es6轉成es5

官方參考文檔：https://webpack.js.org/loaders/babel-loader/

安裝: npm install --save-dev babel-loader babel-core babel-preset-env webpack

配置webpack.config.js文件

 1 var htmlWebpackPlugin = require('html-webpack-plugin');
 2 let path = require('path');
 3 module.exports = {
 4     entry: './src/main.js',
 5     output: {
 6         path: __dirname + '/dist',
 7         filename: 'js/[name].bundle.js',
 8     },
 9     plugins: [
10         new htmlWebpackPlugin({
11             filename: 'index.html',
12             template: 'index.html',
13             inject: true
14         })
15     ],
16     module: {
17         rules: [
18             {
19                 test: /\.js$/,
20                 exclude: /(node_modules)/,
21                 include: [
22                     path.resolve(__dirname, "src"),
23                 ],
24                 use: {
25                     loader: 'babel-loader',
26                     options: {
27                         presets: ['env']
28                     }
29                 }
30             }
31         ]
32     }
33 }

解釋下新增長的配置：

rules就是配置規則，他是一個數組，每一項爲一個對象，若是有多個loader,那就用多個對象， test: /\.js$/ 就是以.js結尾的文件， exclude:排除node_modules這個目錄，意思就是不要去這個目錄下處理.js的文件，有什麼好處呢？大大提升打包的速度. include裏面的配置意思就是把src目錄下面的js文件做爲處理的目標，use配置就是使用babel-loader

2、使用css

1，在src目錄下新建一個css目錄，在該目錄下面新建一個css文件: style.css，代碼以下：

 1 html,body{
 2     margin: 0;
 3     padding: 0;
 4 }
 5 body {
 6     background: #08f;
 7 }
 8 ul,li {
 9     list-style-type:none;
10 }
11 div {
12     transition: all ease 1s;
13 }

而後在main.js中導入css文件

1 import modal from './components/modal.js';
2 import './css/style.css';
3 let App = function(){
4     console.log( '項目入口文件main.js' );
5 }
6 new App();

執行webpack打包命令，會報錯，提示須要一個loader，咱們安裝css-loader和style-loader

安裝命令: npm install css-loader style-loader --save-dev

官方參考文檔：https://webpack.js.org/loaders/css-loader/

而後配置webpack.config.js:

 1 var htmlWebpackPlugin = require('html-webpack-plugin');
 2 let path = require('path');
 3 module.exports = {
 4     entry: './src/main.js',
 5     output: {
 6         path: __dirname + '/dist',
 7         filename: 'js/[name].bundle.js',
 8     },
 9     plugins: [
10         new htmlWebpackPlugin({
11             filename: 'index.html',
12             template: 'index.html',
13             inject: true
14         })
15     ],
16     module: {
17         rules: [
18             {
19                 test: /\.js$/,
20                 exclude: /(node_modules)/,
21                 include: [
22                     path.resolve(__dirname, "src"),
23                 ],
24                 use: {
25                     loader: 'babel-loader',
26                     options: {
27                         presets: ['env']
28                     }
29                 }
30             },
31             {
32                 test: /\.css$/,
33                 exclude: /(node_modules)/,
34                 use: [
35                     'style-loader',
36                     'css-loader'
37                 ]
38             }
39         ]
40     }
41 }