webpack整合bootstrap4.0和anjular1.x系列

最新推荐文章于 2024-04-18 15:19:36 发布

Dove88888888

最新推荐文章于 2024-04-18 15:19:36 发布

阅读量657

点赞数

分类专栏：前端笔记文章标签： webpack angular bootstrap jquery

本文链接：https://blog.csdn.net/Dove88888888/article/details/79869122

版权

前端笔记专栏收录该内容

25 篇文章 0 订阅

订阅专栏

最近古老的项目组突然想学学“新”的东西（相对于jq加ligerui），选了比较保守的一些技术让我们这些小的学。我是自然很高兴，毕业大半年了，一直在传统it里面当前端，东西基本都是原始级的前端，原生js+jq+原生css来写政府项目。虽然比较古老一些，但是对基础知识得到了一定的锻炼吧。

这半年都没怎么看新东西，果然与世隔绝。

简单的配置了一下webpack，整合了bootstrap4.0和anjular1.x系列（不是2.0以后）。目录如下：

（假设你会鼓捣npm命令那些玩意）各种要加载的模块以及版本可以看我的package.json(babel那些和主题无关，是jsx和es6用的)

除了webpack 和webpack-dev-server和bootstrap4.0以及anjular1.x要注意一下版本，其他的可以放心使用最新版（相对于20180409）

{
  "name": "webpack_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack",
    "server": "webpack-dev-server --open"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "angular": "^1.6.5",
    "bootstrap": "^4.0.0",
    "css-loader": "^0.28.11",
    "jquery": "^3.3.1",
    "node-sass": "^4.8.3",
    "popper.js": "^1.14.3",
    "resolve-url-loader": "^2.3.0",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.20.3",
    "url-loader": "^1.0.1",
    "webpack": "^3.5.5",
    "webpack-dev-server": "^2.8.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "expose-loader": "^0.7.5"
  }
}

安这东西的时候不能急，很多版本的问题在里面，多百度百度。下面是我的webpack.config.js。如果你没有入门，推荐你看点击打开链接这个入门教程写的很好，看完了基本就明白个大概了。

/**
 * Created by dongge on 2018/4/8.
 */
var webpack = require('webpack');

module.exports = {
    devtool:'eval-source-map',
    entry:__dirname + "/app/entry.js",
    output:{
        path:__dirname +'/public',
        filename:"bundle.js"
    },
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    },
    module:{
        rules:[
            {
                test:require.resolve('jquery'),
                loader:'expose-loader?$!expose-loader?jQuery'
            },
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env", "react"
                        ]
                    }
                },
                exclude: /node_modules/
            },
            {test: /\.css$/, loader: 'style-loader!css-loader'},
            {test: /\.(png|jpg|ttf)$/, loader: 'url-loader?limit=8192'}

        ]
    },
    plugins:[
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            'window.$':'jquery',
            'window.jQuery':'jquery',
            Popper: ['popper.js', 'default']
        })

    ]
}

接下来我们在入口文件（entry.js）中引入各种要打包的文件：

/**
 * Created by dongge on 2018/4/8.
 */
var angular = require('angular');//引入angular
var ngModule = angular.module('app',[]);//定义一个angular模块
// require('./directives/hello-world/hello-world.js')(ngModule);//引入指令(directive)文件
require('./css/style.css');//引入样式文件
require('bootstrap/dist/css/bootstrap.css')
require('bootstrap/dist/js/bootstrap.js')

然后我们在index.html中简单测试一下angular

<!-- index.html --> <!DOCTYPE html>
<html lang="en" ng-app>
<head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title></head>
    <script src="bundle.js"></script>
<body>
<input type="text" ng-model="user">
<div>{{user}}</div>
</body>
</html>

另外，各种模块的更新都可能会对打包有影响，你要注意你使用的时间，控制台中一般都有提示，一些最新的写法啥的，我继续研究去了。