非常适合从零开始学习（自行安装node.js） 1、查看npm -v是否已经安装 npm -v 2、安装webpack
参考文档：https://segmentfault.com/a/1190000012789253?utm_source=tag-newest
webpack配置参考了vue-cli供给webpack-simple模板，这也是vue-cli里面最简单的一个webpack配置，非常适合从零开始学习（自行安置node.js）
1、检察npm -v是否已经安置
npm -v
2、安置webpack
npm i webpack -g
3、安置webpack4
npm i webpack-cli -g
4、新建一个文件夹vue-webpack-simple
新建package.json
5、进入刚刚创建的目录
6、执行
npm init -y
安置vue webpack webpack-dev-server
npm i vue --save npm i webpack webpack-dev-server --save-dev
7、根目录下新建index.html
<!DOCTYPE html> <html lang=http://www.mamicode.com/"en"> <head> <meta charset=http://www.mamicode.com/"UTF-8"> <meta name=http://www.mamicode.com/"viewport" content=http://www.mamicode.com/"width=device-width, initial-scale=1.0"> <meta http-equiv=http://www.mamicode.com/"X-UA-Compatible" content=http://www.mamicode.com/"ie=edge"> <title>Document</title> </head> <body> </body> </html>
8、根目录下新建webpack.config.js
var path = require(‘path‘); var webpack = require(‘webpack‘); module.exports = {};
9、新建src文件夹，src文件夹下新建main.js
整个项目的布局如下
10、JS模块化
在ES6呈现之前，js是没有统一的模块体系。
处事器端使用CommonJS规范,而浏览器端又有AMD和CMD两种规范webpack的思想就是一切皆模块，官方保举使用commonJS规范，这使得我们浏览器端也可以使用commonJS的模块化写法
module.exports = {}
11、src目录下新建一个util.js
module.exports =http://www.mamicode.com/ function say() { console.log(‘hello world‘); }
main.js
var say = require(‘./util‘); say();
改削webpack.config.js
var path = require(‘path‘); var webpack = require(‘webpack‘); module.exports =http://www.mamicode.com/ { entry: ‘./src/main.js‘, // 项目的入口文件，webpack会从main.js开始，把所有依赖的js都加载打包 output: { path: path.resolve(__dirname, ‘./dist‘), // 项目的打包文件路径 publicPath: ‘/dist/‘, // 通过devServer访谒路径 filename: ‘build.js‘ // 打包后的文件名 }, devServer: { historyApiFallback: true, overlay: true } };
改削package.josn
"scripts": { "dev": "webpack-dev-server --open --hot", "build": "webpack --progress --hide-modules" },
注意：webpack-dev-server会自动启动一个静态资源web处事器 --hot参数暗示启动热更新
改削index.html，，引入打包后的文件
<!DOCTYPE html> <html lang=http://www.mamicode.com/"en"> <head> <meta charset=http://www.mamicode.com/"UTF-8"> <meta name=http://www.mamicode.com/"viewport" content=http://www.mamicode.com/"width=device-width, initial-scale=1.0"> <meta http-equiv=http://www.mamicode.com/"X-UA-Compatible" content=http://www.mamicode.com/"ie=edge"> <title>Document</title> </head> <body> <script src=http://www.mamicode.com/"/dist/build.js"></script> </body> </html>
11、运行
npm run dev
可以发明浏览器自动打开的一个页面，检察控制台，有hello world打出
随意改削util.js，可以发明浏览器会自动刷新，非常便利。
12、打包后的bundle.js文件，运行
npm run build
13、可以看到生成了一个dist目录，里面就有打包好后的bundle.js
21、引入vue
安置vue
npm install vue
main.js
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31625.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")