webpack安装基于nodejs,先安装nodejs。
第一步安装webpack
在相应的路径打开cmd,输入npm install webpack -g
npm install webpack-dev-server -g
npm install webpack -D
npm install webpack-dev-server -D
这里安装webpack和webpack服务器,并且安装全局和当前的路径(这样的好处是当你需要转移文件的时候可以带着当前的package.json一起)
建立一个js取名,我这里是webpack.build.js
module.exports = {
// 这个是输入路径,相对路径
entry:'./src/main.js',
// 输出路径,绝对路径
output:{
// __dirname是当前路径前的绝对路径的那一部分
// 例如我的是C:\wamp\www\nodeItem\demo0719\my_pro
path:__dirname+'/dist',
// 输出文件
filename:'bundle.js'
},
// 配置使用的模块
module:{
// 配置使用的加载器
loaders:[
// 需要处理的文件类型,正则跟文件路径匹配,这里有俩个,第一个是处理css,第二个是处理普通文件的loader
{test:/\.css$/,loader: 'style-loader!css-loader'},
{test: /\.(png|jpg|jpeg|gif|ttf|svg)$/,loader: 'url-loader'}
]
}
}
webpack-dev-server与webpack的代码区别只在于output下的path:__dirname,filename:'dist/bundle.js'
这个是loader的简单使用.
然后是plugins的使用
其实也就是在
loaders:[
{
test: /\.js$/,
exclude: /node_modules/,//除去node_modules文件路径下的js,不需要编译的
loader: 'babel-loader'
}
]
数组对象内加个test,把其导入。