webpack(二） loader的使用

怼烎@ 2022-06-13 07:51 215阅读 0赞

网上找了好多参考，发现好多使用的webpack1.*或者2.*的，看了下自己安装的webpack版本，竟然是3.0.难怪有些地方跟网上说的结果不一致。  
第一步：创建项目  
![这里写图片描述][SouthEast]

第二步： 使用npm来安装webPack需要的相关插件。

npm install webpack --save -dev
    
    npm install babel-core  --save -dev
    
    npm install babel-loader  --save -dev
    
    npm install css-loader  --save -dev
    
    npm install file-loader  --save -dev
    
    npm install sass-loader --save -dev
    
    npm install style-loader --save -dev
    
    npm install url-loader --save -dev
    
    npm install webpack-dev-server --save -dev

执行完了，主要是修改package.json文件。

{
      "name": "webpack6",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": { "start": "webpack-dev-server --progress --colors --inline" },
      "author": "",
      "license": "ISC",
      "dependencies": { "babel-core": "^6.25.0", "babel-loader": "^7.1.1", "css-loader": "^0.28.4", "file-loader": "^0.11.2", "sass-loader": "^6.0.6", "style-loader": "^0.18.2", "url-loader": "^0.5.9", "webpack": "^3.0.0", "webpack-dev-server": "^2.5.0" },
      "devDependencies": { "babel-preset-es2015": "^6.24.1" } }

第三步：编写webpack.config.js文件，手动添加该文件到项目跟目录下面，将以下内容copy进去。

var path=require('path');
    module.exports={
        entry:{
            admin:'./admin/index.js',
            customer:'./customer/customer.js'
        },
        output:{
            path:path.join(__dirname,'dist'),
            publicPath:'/dist/',
            filename:'[name].bundle.js'
        },
        module: {
            loaders: [
                { test: /\.css$/, loader: 'style-loader!css-loader' },
                { test: /\.js$/, exclude:/node_modules/,loader: 'babel-loader' },
                { test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader?sourceMap'},
                { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
            ]
        }
    }

第四步：添加admin文件夹以及下面的相关文件。  
index.js文件内容如下

import './css/index.css'
    import './css/index.scss'
    
    document.getElementById("content").innerHTML=` 这是系统测试 看看如何实现

index.html文件内容如下

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div style="width:100%;height:30px;font-size:13px;background-color:#E2E2E2;vertical-align: center">
        <div style="line-height: 30px;">左标题</div>
    </div>
    
        <p id="content"></p>
        <script src="/dist/admin.bundle.js"></script>
    
    </body>
    </html>

/css/index.css的内容如下：

body,div{ margin: 0px; padding: 0px; }
    
    body{ background:url(../../icons/hudie.png) gray; }
    #pageTitle:before{ content:url('../../images/scheduler.gif') }

/css/index.scss的内容：

body{
      p{
        color:blue;
      }
    }

文件目录解构请看下图  
![这里写图片描述][SouthEast 1]  
第五步：执行npm start， 如果这里报es6的编译错误的法，请查看前面讲的babel的使用。  
![这里写图片描述][SouthEast 2]

也就是要实现该命令，以及实现.babelrc文件

如果出现下面的错误  
![这里写图片描述][SouthEast 3]  
则执行下以下命令

cnpm install node-sass@latest

npm install --save-dev babel-preset-es2015

第六步：浏览器中输入[http://localhost:8080/admin/][http_localhost_8080_admin]  
如果出现以下界面，表示通过webpack集成css、scss、url、图片、es6相关功能的例子已经完成。  
![这里写图片描述][SouthEast 4]

[SouthEast]: /images/20220613/4752da596ec34c959676041b6c19212c.png
[SouthEast 1]: /images/20220613/158cea53b46e478da71def9098c6a9da.png
[SouthEast 2]: /images/20220613/d64ea0cc09ba46d880fa6fcb11fd22df.png
[SouthEast 3]: /images/20220613/7d8a704821444b52be162d5d827d15bb.png
[http_localhost_8080_admin]: http://localhost:8080/admin/
[SouthEast 4]: /images/20220613/f79f31e1ab8642ad8e707d2d06874485.png