如果没有脚手架, 该如何使用webpack搭建项目呢?
（开发环境需要先安装node）
- 新建一个空文件夹，此处命名为webpack_test；
- webpack_test下新建src文件夹，src下新建一个main.js，后续可配置为入口文件；
- src下新建js、css、img文件夹，用于存放开发时的js文件，css文件，img文件等，待后续用；
- webpack_test下新建index.html文件，作为网页首页；
- 打开终端，全局安装webpack：npm install webpack -g (-g表示全局安装)；
- 切换到webpack_test目录下，局部安装webpack: npm install --save-dev webpack(--save表示局部安装，-dev表示开发时依赖，即项目在运行时不会依赖webpack,因为webpack是帮助项目进行模块化打包)；安装完成后，webpack_test目录下多了node_modules文件夹。
- 在webpack_test目录下，输入命令：npm init 初始化package.json文件，可用于配置项目有关的。终端会询问package name: (webpack_test)等问题，其中entry point: (index.js) 是指定入口文件，可直接回车默认，也可输入main.js这样的名字，指定到之前建的main.js。其他可直接一路回车完成初始化；
- 在webpack_test目录下，新建一个dist文件夹，用来存放webpack打包后生成的文件，如bundle.js文件、图片等，见后文；目前，项目结构基本如下：（js文件夹下放了一个自己写的简单的mathUti.js文件）
- 由于使用了模块化的语法，需要webpack打包转化成浏览器可识别的语法，所以在终端输入命令：webpack ./src/main.js ./dist/bundle.js。（在终端使用webpack命令用的是全局webpack, 我这里因为版本问题会报错）
- 在package.json的“scripts”下，添加“build”:“webpack”，这样在终端执行npm run build就可以执行webpack这个打包命令。
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" },
- 在webpack_test下创建一个webpack.config.js,这是webpack的配置文件，可配置webpack的输入输出目录。
const path = require('path'); //引入node.js的path模块，用于处理文件路径 module.exports = { entry:"./src/main.js", //指定入口文件 output: { path : path.resolve(__dirname, 'dist'), //指定出口路径，拼接一个绝对路径，而且是根据文件位置动态变化的。 filename :"bundle.js" //指定出口文件名 } } - 以上配置至此，在终端运行npm run build，已经能够使main.js中的两个console.log成功打印。
- 安装css-loader, 配置css-loader。在css文件夹下新建一个easy.css文件，并设置body的background-color。
body { background-color: orange; }
为了让css文件能正常打包，需要安装css-loader和style-loader: npm install --save-dev css-loader style-loader, 并在webpack.config.js中添加配置，在上述配置的module.exports中平级于output添加：
module:{ test: /\.css$/, use:['style-loader','css-loader'], }
还需要在main.js中添加依赖
require('./css/easy.css')这样可看到背景颜色有了效果。
- 如果使用了less,则也需要安装和配置:less-loader, less，配置less-loader。安装：npm install --save-dev less-loader less; 配置：
module:{rules:[{test: /\.css$/,use: ['style-loader', 'css-loader'],},{test:/\.less$/,use:[{loader:'style-loader'},{loader: 'css-loader'},{loader: 'less-loader'}],}]}
也需要在main.js中添加依赖,
require('./css/lesstest.css')如果没用到less，则不需要这些操作。
- 安装url-loader,配置url-loader。如果有图片需要打包，则需要安装和配置url-loader。安装:npm install --save-dev url-loader file-loader。配置：
{ test:/\.(png|jpg|gif|jpeg)$/, use:[{ loader: 'url-loader', options:{ limit:8192, //小于这个limit的图片会被base64编码，大于时需要使用file-loader来加载。 name: 'img/[name].[hash:8].[ext]' //配置打包后的图片，放置在img文件夹下，名字后跟8位hash值以保持名字独特性。 } }] },
由于浏览器加载的是打包后的图片，在dist目录中，所以需要在webpack.config.js中添加publicPath:
output: { path : path.resolve(__dirname, 'dist'), filename :"bundle.js", publicPath:"dist/" //添加这个 },
例子：将esay.css中的background-color改为background，
body { /* background-color: orange; */ background: url('../img/bb.jpg'); }
因为使用的图片bb.jpg大一limit限制，如果没有配置publicPath, 则用npm run build打包后，页面的背景图不会生效，因为浏览器渲染出来的图片路径不对。
- 安装babel-loader，配置。为了将文件中的ES6语法转化为ES5的。注意babel-loader和babel-core版本需要匹配。安装：npm install --save-dev babel-loader@7 babel-core babel-preset-es2015。 配置：
{ test:/\.js$/, use:[{ loader:'babel-loader', options:{ preset:['es2015'] } }] },
- 安装vue, npm install --save vue（注意：-dev是开发时依赖，而vue在运行时也要依赖vue包，所以不加-dev）。
- 安装: npm install --save-dev vue-loader, vue-template-compiler ，配置：
{ test:/\.vue$/, use:['vue-loader'] }
用于加载.vue后缀的文件。运行时，（注意这个报错：bundle.js:944 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.）是因为vue有开发模式和发布模式，我们使用的runtime-only build模式下没有模板编译器。可以添加一个配置，暂时解决这个问题：在webpack.config.js中，平行于output，添加如下配置
-
resolve:{ alias:{ 'vue$':'vue/dist/vue.esm.js' } }
注意，这个方法时是暂时解决，后续有其他方式。 这个配置是指定node_modules包下的vue/dist/vue.esm.js来进行编译，即使用vue的开发模式。
- 开发模式和生产模式下build一个项目有很大区别，在开发模式下，我们希望强大的source mapping以及热更新等功能，而生产模式下，我们希望项目体积更轻便加载时间更短，所以常推荐将webpack.config.js分离出来，包括一个基础的配置，一个开发环境配置，一个生产环境配置。可通过webpack-merge套件来将他们合并。首先需要安装：npm install --save-dev webpack-merge。使用的时候需要require('webpack-merge').如下是生产环境配置。
const baseConfig = require('./base.config'); const merge = require('webpack-merge'); const htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = merge(baseConfig, { plugins:[ new htmlWebpackPlugin( {template:'index.html'} ) ] })
- 安装html-webpack-plugin, 使打包的时候可根据已有模板生产一个html文件。安装：npm install --save-dev html-webpack-plugin。这样可以去掉之前配置的publicPath.
output: { path: path.resolve(__dirname, 'dist'), filename: "bundle.js", publicPath: "dist/" //去掉这个 },
- 搭建本地服务器。安装：npm install --save-dev webpack-dev-server。配置：
module.exports = merge(baseConfig, { devServer:{ contentBase: "../src", //注意路径。监听的目录 inline: true } })
- 更改package.json里的scripts属性的参数
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config ./build/prod.config.js", //指定配置文件的目录 "dev": "webpack-dev-server --open --config ./build/dev.config.js" //--open配置热更新自动打开网页。 --config指定配置文件的目录 },