webpack(二） loader的使用

最新推荐文章于 2024-05-09 18:25:29 发布

飞天代码

最新推荐文章于 2024-05-09 18:25:29 发布

阅读量922

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/weiyongliang_813/article/details/74079982

版权

webpack 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

第二步：使用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;
  }
}

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

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

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

cnpm install node-sass@latest

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

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

飞天代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack(二） loader的使用

网上找了好多参考，发现好多使用的webpack1.或者2.的，看了下自己安装的webpack版本，竟然是3.0.难怪有些地方跟网上说的结果不一致。第一步：创建项目第二步：使用npm来安装webPack需要的相关插件。npm install webpack --save -devnpm install babel-core --save -devnpm install babel-lo
复制链接

扫一扫