最近古老的项目组突然想学学“新”的东西（相对于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>另外，各种模块的更新都可能会对打包有影响，你要注意你使用的时间，控制台中一般都有提示，一些最新的写法啥的，我继续研究去了。
