码迷,mamicode.com
首页 > Web开发 > 详细

webpack4新建一个项目

时间:2018-03-27 12:24:10      阅读:309      评论:0      收藏:0      [点我收藏+]

标签:ade   test   erro   spec   entry   AC   nbsp   babel   sed   

Create a new directory

  mkdir webpack-4-quickstart

Initialize a package.json by running:

  npm init -y

技术分享图片
 1 {
 2   "name": "test",
 3   "version": "1.0.0",
 4   "description": "",
 5   "main": "index.js",
 6   "scripts": {
 7     "test": "echo \"Error: no test specified\" && exit 1",
 8     "dev": "webpack --mode development",
 9     "build": "webpack --mode production",
10     "server": "webpack-dev-server --config webpack.config.js"
11   },
12   "author": "",
13   "license": "ISC",
14   "devDependencies": {
15     "babel-core": "^6.26.0",
16     "babel-loader": "^7.1.4",
17     "babel-preset-env": "^1.6.1",
18     "css-loader": "^0.28.11",
19     "html-webpack-plugin": "^3.1.0",
20     "style-loader": "^0.20.3",
21     "webpack": "^4.2.0",
22     "webpack-cli": "^2.0.13",
23     "webpack-dev-server": "^3.1.1"
24   }
25 }
package.json

安装以上配置文件里没有的包

npm i -D 包名

 加载自定义文件

技术分享图片
 1 const webpack=require("webpack")
 2 const HtmlWepackPlugin = require(‘html-webpack-plugin‘);
 3 const path = require(‘path‘);
 4 module.exports={
 5     entry:{
 6         index:path.resolve(__dirname,‘src/entry.js‘)
 7     },
 8     output: {
 9         filename: ‘[name].[hash].js‘,
10         path: path.resolve(__dirname, ‘dist‘),
11         publicPath: ‘/dist/‘
12       },
13       module: {
14         rules: [
15           {test: /\.js$/, use: [‘babel-loader‘]},
16           {test: /\.css$/, use: [‘style-loader‘, ‘css-loader‘]}
17         ]
18       },
19       plugins: [
20         new HtmlWepackPlugin({
21           filename: ‘./index.html‘,
22           template: ‘./template.html‘
23         })
24       ]
25 }
webpack.config.js

文件目录如下:

技术分享图片

 

webpack4新建一个项目

标签:ade   test   erro   spec   entry   AC   nbsp   babel   sed   

原文地址:https://www.cnblogs.com/navysummer/p/8656471.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!