webpack打包静态资源文件

2,202 阅读1分钟

1、初始化一个packjson.js文件

npm init

2、进行全局安装webpack

npm install -g webpack

3、cmd跳转到项目的文件夹,安装webpack

npm install --save-dev webpack

4、接着在项目文件夹接着安装,css-loader 和 style-loader处理样式表

npm install --save-dev style-loader css-loader

5、安装css中图片的loader和svg的依赖

npm url-loader svg-url-loader --save-dev

6、在项目文件夹新建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'}
    ]
}

};

7、在项目文件夹下的js文件夹里新建一个entry.js

require('./../css/style.css'); // 载入 style.css
require('./index.js');//载入自身想要用的js

8、最后在命令行cmd中输入webpack就可以自动打包了