webpack(二） loader的使用

来源：互联网发布：少儿编程培训内容编辑：程序博客网时间：2024/06/06 17:22

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

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

npm install webpack --save -devnpm install babel-core  --save -devnpm install babel-loader  --save -devnpm install css-loader  --save -devnpm install file-loader  --save -devnpm install sass-loader --save -devnpm install style-loader --save -devnpm install url-loader --save -devnpm 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