1. Webpackの構成ファイルを使用する
ファイルwebpack.config.js：
const path = require('path');
module.exports = {
entry: './index.js', //要打包的文件
output: {
filename: 'bundle.js', //打包后文件的名字
//__dirname指的是当前文件webpack.config.js所在的位置
path: path.resolve(__dirname, 'bundle') //打包后文件所存放的位置
}
}
1. webpackのデフォルト構成ファイルの名前はwebpack.config.jsです。構成が完了したら、npx webpackコマンドを使用してファイルをパックします。
2.構成ファイルの名前が別の形式（例：webpackconfig.js）の場合、コマンドnpx webpack --config webpackconfig.jsを使用してファイルをパックできます。
3. package.jsonファイルに追加できます：
"script": {
"bundle": "webpack"
}
次に、npm run bundleコマンドを使用してパッケージ化します。
第二に、Webpackパッケージの出力コンテンツの分析
ファイルwebpack.config.js：
const path = require('path');
module.exports = {
//打包时有警告：The 'mode' option has not been set,需要配置mode
//production:打包后压缩代码，development:打包后不压缩代码
mode: 'production', //默认配置，但是添加之后不会有警告
entry: './index.js', //要打包的文件
output: {
filename: 'bundle.js', //打包后文件的名字
//__dirname指的是当前文件webpack.config.js所在的位置
path: path.resolve(__dirname, 'bundle') //打包后文件所存放的位置
}
}
3.ローダーとは（特定のファイルをパックする方法を定義する）
ローダーは、モジュールを前処理するためにwebpackによって使用されます。モジュールが導入される前に、モジュールのコンテンツは事前にローダーによって処理されます。
module.exports = {
module: {
rules: [{
test: /\.(jpg|png|gif)$/, //以.jpg结尾的文件
use: {
loader: 'file-loader',
options: {
name: '[name]_[hash].[ext]', //打包后文件名称和后缀与打包前一致
outputPath: 'images/'
}
}
}]
}
}
このローダーを使用するには、コマンドnpm install file-loader -Dを使用してこのローダーをインストールします。
module.exports = {
module: {
rules: [{
test: /\.js$/, //以.js结尾的文件
use: [{
loader: 'babel-loader',
options:{
presets:['react'] // 预设处理里面的内容是jsx的，需要npm i -D babel-preset-react
}
}]
}]
}
}
このローダーを使用するには、コマンドnpm install babel-loader babel-core -Dを使用してこのローダーをインストールする必要があります。このローダーは、jsの最後でファイルを処理するために使用されます
module.exports = {
module: {
rules: [{
test: /\.(jpg|png|gif)$/, //以.jpg结尾的文件
use: {
loader: 'url-loader',
options: {
name: '[name]_[hash].[ext]', //打包后文件名称和后缀与打包前一致
outputPath: 'images/',
limit: 10240 //小于10240kb会以base64的格式打包在bundle.js文件中，大于才会生成文件
}
}
}]
}
}
このローダーを使用するには、npm install url-loader -Dコマンドを使用してローダーをインストールします。
4、ローダーを使用して静的リソースをパッケージ化する
module.exports = {
module: {
rules: [{
test: /\.(jpg|png|gif)$/, //以.jpg结尾的文件
use: {
loader: 'url-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 10240
}
}
},{
test: /\.(eot|ttf|svg)$/,
use: {
loader: 'file-loader', //打包图标文字文件
}
},{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders :2 //表示在sass文件中额外引入的sass文件也会走postcss-loader和sass-loader
modules: true //开启css模块化的打包，默认为false,即在一个文件中引入sass,会作用于此文件引入的其他模块中，开启之后则只作用于此模块。
}
},
'sass-loader',
'postcss-loader'
] //打包css/sass结尾的文件
//sass-loader:将模块中sass格式的样式解析成css格式的样式
//css-loader:将模块中的样式生成最终的样式块
//style-loader:将css-loader处理后的样式挂载到对应的节点上面
//postcss-loader:
}]
}
}
1.このsass-loaderを使用するには、コマンドnpm install sass-loader node-sass -Dを使用してこのローダーをインストールします。
2. postcss-loaderを使用します。作成したCSSに必要なプレフィックスを追加します。このモジュールを使用するには、新しいファイルpostcss.config.jsを作成する必要があります。このファイルはwebpack.config.jsと同じディレクトリにあり、次の場所に追加します。
module.exports = {
plugins: [
require('autoprefixer')
]
}
このモジュールをプロジェクトに追加するには、コマンドnpm install autoprefixer -D
3.を使用します。モジュールを追加した場合：true、sassメソッドは次のように変更されます：import style from './index.sass';使用方法はstyle.avatar
5、プラグインを使用してパッケージングをより便利にする
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
plugins: [new HtmlWebpackPlugin()], //打包后自动生成index.html文件，并把打包生成的js自动引入到这个html文件中
plugins: [new HtmlWebpackPlugin(
template: 'src/index.html' //使用此模板来生成打包后的html文件，生成的js文件会自动加到生成的html文件中
),new CleanWebpackPlugin(
'dist' //每次打包之前都会自动将dist文件中的内容删除
)]
}
コマンドnpm i html-webpack-plugin -Dを使用してインストールします
6.入力と出力の基本構成
const path = require('path');
module.exports = {
entry: {
main: './src/index.js',
sub: './src/index.js'
},
output: {
publicPath: 'http://cdn.com.cn', //打包之后需要加的路径
filename: '[name].js',
path: path.resolve(__dirname, 'bundle')
}
}
パッケージ化後の結果：
バックエンドがアドレスパッケージ化に参加した後の結果：
