webpack3打包boostrap

最新推荐文章于 2021-02-26 10:13:51 发布

baiyi8022

最新推荐文章于 2021-02-26 10:13:51 发布

阅读量125

点赞数

文章标签： webpack ViewUI

原文链接：http://www.cnblogs.com/Yee-Cheng/p/8289217.html

版权

这个demo的大致目录如下:

需要安装的loader

//这是处理css样式的loader

npm install --save-dev css-loader

//计算页面的样式的loader

npm install --save-dev style-loader

//处理的如png,svg,eot字体等格式的文件

npm install --save-dev file-loader

//处理css引入资源（如图片，字体）的loader

npm install --save-dev url-loader

主入口文件main.js

import "./dist/css/bootstrap.css";
import "./dist/fonts/glyphicons-halflings-regular.eot";
import "./dist/fonts/glyphicons-halflings-regular.svg";
import "./dist/fonts/glyphicons-halflings-regular.ttf";
import "./dist/fonts/glyphicons-halflings-regular.woff";
import "./dist/fonts/glyphicons-halflings-regular.woff2";

import "./dist/js/bootstrap.js";

 
   用于测试的index.html
 
  
 
   <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
    <ul class="nav nav-pills">
        <li role="presentation" class="active"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation"><a href="#">Messages</a></li>
      </ul>
    <div id='root'>
      </div>
    <script src="bundle.js"></script>
</body>
</html> 
  

 
  接下来的配置文件webpack.config.js 
 

 
    module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  },
  module: {
    rules: [
        {
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader"
            },
            exclude: /node_modules/
        },
        //处理css样式
        {
          test: /\.css$/,
          use: [
              {
                  loader: "style-loader"
              }, {
                  loader: "css-loader"
              }
          ]
      },
      //处理图片
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      },
      //处理字体
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
      },

      
    ]
}
}
 
   
 

安装的依赖显示如下:

"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.8",
    "file-loader": "^1.1.6",
    "style-loader": "^0.19.1",
    "url-loader": "^0.6.2"
  }

最后webpack就ok了.

转载于:https://www.cnblogs.com/Yee-Cheng/p/8289217.html

baiyi8022

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack3打包boostrap

这个demo的大致目录如下:需要安装的loader//这是处理css样式的loadernpm install --save-dev css-loader//计算页面的样式的loadernpm install --save-dev style-loader//处理的如png,svg,eot字体等格式的文件npm install --s...
复制链接

扫一扫