正文
webpack 学习心得（一）
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
因为本人也正在学习webpack ，所以此篇文章比较入门。
首先你想使用webpack 需要安装node，推荐最好使用的是4.0以上（为了避免依赖安装错误）
npm install -g webpack
安装 webpack
你可以手动创建相应文件，也可以这样
mkdir webpackdemo
cd webpackdemo
创建 webpackdemo 文件夹 进入当前目录
我们需要一个 package.json 文件记录我们的使用依赖以及一些 demo 信息
这个我们通过
npm init
输入名称 ，描述...（以为这个demo所以无所谓，可以一直回车）完成后，在当前文件夹下 会生成 package.json 文件
此时我们需要手动创建一个配置文件 webpack.config.js （我们每次编译文件时，会自动查找该文件）
var webpack = require('webpack');
var Promise = require('es6-promise').Promise;
module.exports = {
entry:{
init:'./mySuc/index'
},
output:{
path:'./build',
publicPath: 'build/',
filename:'[name].js'
},
module:{
loaders:[{
test:/\.css$/,
loaders:['style','css']
},{
test: /\.(png|jpg)$/,
loader: 'url?limit=1200&name=[hash].[ext]'
}
]
},
// resolve.extensions
// 用于指明程序自动补全识别哪些后缀, 注意一下,
// extensions 第一个是空字符串! 对应不需要后缀的情况.
resolve: {
extensions: ['', '.coffee', '.js']
}
}
entry 目标文件入口 在这里我命名的是 index.js 内容为
console.log("ok!");
output 输出设置
path 当前输出路径
publicPath 服务器输出路径
filename 文件输出名字 现在我们可以在当前目录 新建一个html ，引入编译后的 文件 init.js 现在我们在 用 webpack 编译，刷新页面 在控制台可以 看到 ok！
module 是我门加载文件使用的 依赖配置 我这里用的 css模块依赖 和图片 模块依赖
在加载配置前，我们需要在安装模块
加载css 模块（页面嵌入模式）
npm install css-loader style-loader --save-dev
加载图片打包模块
npm install url-loader --save-dev
着这里有一个bug 就是 node 版本是 5.7 的时候，加在css 模块是会出现一个错误
在此感谢群友的帮助 （雨神），解决的方式如下
npm install es6-promise@3.1.
安装后在配置文件里面添加
var Promise = require('es6-promise').Promise;
到此一个简单的webpack demo 就完成了。
