webpack项目初始配置（一）

最新推荐文章于 2023-05-15 21:37:43 发布

傲娇的萌、

最新推荐文章于 2023-05-15 21:37:43 发布

阅读量765

点赞数

分类专栏：全栈文章标签： webpack

本文链接：https://blog.csdn.net/weixin_43199050/article/details/94564337

版权

全栈专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、github上创建项目仓库，带READNE.md

二、项目初始化

本地克隆项目，使用命令cnpm init项目初始化，命令结束之后项目文件夹下就会多出一个package.json文件。

三、webpack配置——安装以及基本配置

1、webpack安装

2、项目文件夹下新建webpack.config.js文件以及src/app.js

1）根据webpack官网修改wenback.config.js文件内容

官网：

修改之后：

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  }
};

2）app.js内容

3）打包

打包之后，项目文件夹下会多出一个dist/app.js文件。

四、webpack配置——指定输入html文件（html-webpack-plugin插件）

1）生成html文件

官网：

安装好插件之后修改webpack.config.js文件:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  },
  plugins: [new HtmlWebpackPlugin()]
};

再次执行打包命令就会出现dist/index.html文件。

2）打包输出的index.html改为指定html文件

新建src/index.html文件，内容为：

再修改webpack.config.js文件：

再次打包，dist/index.html文件内容就会发生改变：

五、webpack配置——支持ES6（babel-loader插件）

官网

安装：

yarn add babel-core@6.26.0 babel-preset-env@1.6.1 babel-loader@7.1.2 --dev

安装babel-loader之后配置webpack.config.js

其中，

//官网
presets: ['@babel/preset-env']

//简写
presets: ['env']

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  },
  module: {
	rules: [
	  {
	    test: /\.js$/,
	    exclude: /(node_modules)/,
	    use: {
	      loader: 'babel-loader',
	      options: {
	        presets: ['env']
	      }
	    }
	  }
	]
  },
  plugins: [new HtmlWebpackPlugin({
  	template:'./src/index.html'
  })]
};

修改src/app.js文件如下：

再执行打包命令，若dist/app.js文件中有以下内容，则代表支持了ES6：

六、webpack配置——react配置

1、安装babel-preset-react插件

2、修改webpack.config.js

3、安装react以及react-dom

4、修改src/app.js

5、重新执行打包命令后，dist/app.js文件有如下内容：

并且再浏览器中可打开dist/index.html文件可查看：

七、webpack配置——CSS样式配置

1、安装style-loader、css-loader

2、修改webpack.config.js

3、新建src/index.css并在app.jsx中引入

重新执行打包命令，刷新页面可看到页面字体变红。

4、安装extract-text-webpack-plugin插件

5、修改webpack.config.js文件

重新执行命令，会看到dist文件夹下多出一个index.css文件：

八、webpack配置——SASS以及LESS样式配置

1、安装sass-loader

2、安装node-sass

3、修改webpack.config.js

4、新建src/index.scss文件，并在app.jsx文件中引入

重新执行打包命令，刷新网页：

5、安装less以及less-loader

6、配置webpack.config.js

    {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: ["css-loader","sass-loader"]
        })
      },

7、检验，检验方式与sass一样

九、webpack配置——图片配置

1、安装file-loader以及url-loader

2、修改webpack.config.js文件

3、检测图片是否可用

再执行打包命令，刷新浏览器：

同时，dist文件夹里会多处一个图片文件。

十、webpack配置——字体配置

1、安装font-awesome

2、修改webpack.config.js文件

3、使用

执行打包命令之后，网页中会有一个book的icon图标，并且dist文件夹中会出现eot、svg、ttf、woff、woff2、otf文件：

十、webpack配置——让生成的dist文档结构更清晰

1、修改webpack.config.js

主要修改如下：

//引入webpack
const webpack = require('webpack');

...

output: {
    path: path.resolve(__dirname, 'dist'),
    //修改输出文件路径
    filename: 'js/app.js'
},


...

    {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
                //配置图片文件输出路径，已经文件命名规则
            	name:'resource/[name].[ext]'
            },
          },
        ],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
                //配置字体文件输出路径，已经文件命名规则
            	name:'resource/[name].[ext]'
            },
          },
        ],
      }

...

 plugins: [

    ...

  	new webpack.optimize.CommonsChunkPlugin({
  		name:'common',
        //配置公共模块文件输出路径
  		filename:'js/base.js'
  	})
  ]

完整的webapck.config.js如下：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './src/app.jsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/app.js'
  },
  module: {
	rules: [
		// react（jsx）语法的处理
	  {
	    test: /\.jsx$/,
	    exclude: /(node_modules)/,
	    use: {
	      loader: 'babel-loader',
	      options: {
	        presets: ['env','react']
	      }
	    }
	  },
	  	//css的处理
	  {
	  	test: /\.css$/,
	  	use: ExtractTextPlugin.extract({
	  		fallback:'style-loader',
	  		use:'css-loader'
	  	})
	  },
	   //scss的处理
	  {
	  	test: /\.scss$/,
	  	use: ExtractTextPlugin.extract({
	  		fallback:'style-loader',
	  		use:['css-loader','sass-loader']
	  	})
	  },
	  //图片的处理
	  {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
            	name:'resource/[name].[ext]'
            },
          },
        ],
      },
      //字体的处理
      {
        test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
            	name:'resource/[name].[ext]'
            },
          },
        ],
      }
	]
  },
  plugins: [
  	//处理html文件
  	new HtmlWebpackPlugin({
  		template:'./src/index.html'
  	}),
  	//独立css文件
  	new ExtractTextPlugin("css/[name].css"),
  	//提出公共模块
  	new webpack.optimize.CommonsChunkPlugin({
  		name:'common',
  		filename:'js/base.js'
  	})
  ]
};

配置完成之后，将之前生成的dist文件夹删除，再次执行打包命令，会生成新的dist文件夹。

十一、webpack配置——实现自动刷新

1、安装webpack-dev-server

2、启动，使用webpack-dev-server启动项目，可直接输入网址访问网页

虽然上面实现了可直接输入网址访问网页，但是出现了一个问题：字体未加载成功。解决方法如下：

修改webpack.config.js文件

再次执行打包命令：node_modules/.bin/webpack-dev-server，再访问localhost:8080/dist（具体端口看打包编译结果）即可。此时，实时渲染的功能已经实现，即当页面代码有所改动，页面会实时渲染，不需要重新执行打包编译命令。

十一、webpack配置——指定端口以及输入不存在的页面自动跳转到首页

修改webpack.config.js

十二、webpack配置——设置脚本命令，简化启动命令

修改package.json文件：

修改之后，可直接用以下命令启动：

yarn run dev

yarn run dist

十三、选择性提交代码

1、项目文件夹下新增.gitignore文件，例如不需要提交node_modules文件夹、dist文件夹、日志文件，内容如下：

十四、每次打包之前，删除上一次打包生成的文件

安装：

npm install --save-dev clean-webpack-plugin

修改webpack.config.js:

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
const webpackConfig = {
    plugins: [
          ...
        new CleanWebpackPlugin(),
    ],
};

最后附上所安装的插件的版本信息：

十五、css modules配置

上述步骤还遗留了一个问题，那就是css modules的配置。详情请看下一章《webpack项目初始配置（二）——css modules与antd》。

傲娇的萌、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack项目初始配置（一）

一、github上创建项目仓库，带READNE.md二、项目初始化本地克隆项目，使用命令cnpm init项目初始化，命令结束之后项目文件夹下就会多出一个package.json文件。三、webpack配置——安装以及基本配置1、webpack安装2、项目文件夹下新建webpack.config.js文件以及src/app.js1）根据webpack官网修改we...
复制链接

扫一扫

专栏目录