webpack简单搭建

来源：互联网发布：测温软件有悬浮编辑：程序博客网时间：2024/05/18 03:22

就计算机这些知识而言，光看是没用的，只有多动手写才能牢记，这两天又看了下webpack的配置，然后自己动手配置了下，用到的东西也不多，下面是具体的配置步骤：

用到的插件和load

“css-loader”,”style-loader”: 一起对css文件作处理,
“extract-text-webpack-plugin”: 将css从js中分离出来，单独形成一个css文件，
“html-webpack-plugin”: 自动生成一个html文件，并将webpack生成的包引用进去，
“webpack-dev-server”: 当css,js等文件改变后对页面自动刷新，

配置步骤

1.新建一个web项目，在项目路径下执行npm init -y生成一个默认的package.json文件；
2.新建一个webpack.config.js文件，里面存放的具体的webpack的配置；
3. webpack.config.js配置完成后，可以在package.json的scripts添加一些经常使用的命令，使用npm run +命令名称来调用，更加方便；

package.json

{  "name": "newStudy",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "build": "webpack",    "devserver": "webpack-dev-server --env development"  },  "keywords": [],  "author": "",  "license": "ISC",  "devDependencies": {    "css-loader": "^0.28.7",    "extract-text-webpack-plugin": "^2.1.2",    "html-webpack-plugin": "^2.30.1",    "style-loader": "^0.18.2",    "webpack": "^2.3.2",    "webpack-dev-server": "^2.4.2"  }}

webpack.config.js

const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const ExtractTextPlugin = require("extract-text-webpack-plugin");const PATH = {    app:path.join(__dirname,'js'),    build:path.join(__dirname,'build')};module.exports = {    devServer:{        host:process.env.HOST,        port:80,    },    entry:{        app:PATH.app    },    output:{        path:PATH.build,        filename:'[name].bundle.js',    },    module:{        rules:[             {                test: /\.css$/,                use: ExtractTextPlugin.extract({                  fallback: "style-loader",                  use: "css-loader"                })              },        ]    },    plugins:[        new HtmlWebpackPlugin({            title:'html5 and css3',            template: './index.html'        }),        new ExtractTextPlugin("styles.css"),    ]};

最后就可以对html,css,js文件进行修改了，并且网页会自动刷新，若发现错误，请在评论中告诉我，谢谢~~~

阅读全文

0 0