首页 > 代码库 > webpack 入门
webpack 入门
安装环境
1.安装node.js(v0.6以上)
2.安装到全局环境下
npm install webpack -g
3.本地安装，webpack依赖项目
#进入项目目录（根目录）
#创建填写package.json 文件
npm init
#安装webpack依赖
npm install webpack --save-dev
4.如果需要使用webpack开发工具，要单独安装
npm install webpack --dev-server --save-dev
配置文件
<!--html-->
<html>
<head></head>
<body>
<div class="box"></div>
<script src="http://www.mamicode.com/bundle.js"></script>
</body>
</html>
#假设文件都在根目录下
//module.js
module.export=‘ It works from module.js ‘
/*style.css*/
.box{width:100px;height:100px;background-color:red;}
//entry.js
require(‘./style.css‘) //载入style.css
document.write(‘ It works ‘)
document.write(require(‘./module.js‘)) //添加模块
#安装loader
npm install css-loader style-loader
#运行
method1
webpack entry.js bundle.js --module-bind "css=style-loader!css-loader"
method2
#创建webpack.config.js
webpack=require(‘webpack‘)
module.exports={
entry: ‘ ./entry.js ‘,
output:{
path: _dirname,
filename: ‘ bundle.js ‘
},
module:{
loaders[
{text: / \.css$ / , loader: ‘ style-loader!css-loader ‘}
]
}
plugins:[ //安装插件
. . .
]
}
运行 webpack
就是如此简单，你就运行起来了
参考：
https://webpack.bootcss.com/
http://webpackdoc.com/index.html
webpack 入门