webpack对静态资源打包

来源：互联网发布：网络零售额什么意思编辑：程序博客网时间：2024/06/05 17:51

要确保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，如下

<!-- index.html -->
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="js/bundle.js"></script>
</body>
</html>

10、最后在命令行cmd中输入webpack就可以自动打包了（但是要记得始终要在原始目录下）

阅读全文

1 0