1、要确保node的版本是否是最新稳定版
2、接着需要packjson.js文件,全部enter掉就好了,默认值就行了
npm init
3、进行全局安装webpack
npm install -g webpack
4、cmd跳转到项目的文件夹,安装webpack
npm install --save-dev webpack
5、接着在项目文件夹接着安装,css-loader 和 style-loader处理样式表
npm install --save-dev style-loader css-loader
6、安装css中图片的loader和svg的依赖
npm url-loader svg-url-loader --save-dev
7、在项目文件夹新建webpack.config.js,我的内容如下
var webpack = require('webpack');module.exports = {entry: __dirname+'/js/entry.js',output: {path: __dirname+'/js',filename: 'bundle.js'},module: {loaders: [{test: /\.css$/,loader: 'style-loader!css-loader'},{test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},{test: /\.svg/, loader: 'svg-url-loader'}]}};
8、在项目文件夹下的js文件夹里新建一个entry.js,我的内容如下(测试用的)
require('./../css/style.css'); // 载入 style.cssrequire('./index.js');//载入自身想要用的js
9、输出的网页的内容index.html,如下
10、最后在命令行cmd中输入webpack就可以自动打包了(但是要记得始终要在原始目录下)